为Jquery过滤器插件构建哈希标记支持

我想为我的公文包页面提供一个超级基本的过滤系统，因此当用户点击“品牌”时，只需使用品牌的类名即可显示（其余部分隐藏），当用户点击打印设计时，只需打印即可显示，等等

我用过同位素和流沙，但这次我想用一种超基本的方法来做而不产生任何影响。所以我选择了使用。jquery相当简单——它查找与筛选器链接和显示/隐藏具有相同类的公文包项。以下是jquery：

$('ul#filter a').click(function() {
    $(this).css('outline','none');
    $('ul#filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

    if(filterVal == 'all') {
        $('ul#portfolio li.hidden').show().removeClass('hidden');
    } else {

        $('ul#portfolio li').each(function() {
        if(!$(this).hasClass(filterVal)) {
            $(this).hide().addClass('hidden');
        } else {
            $(this).show().removeClass('hidden');
        }
    });
    }

    return false;
});

在我的标题/导航中，我的导航包含所有这些可过滤链接。所以在导航的“工作”下面，我有所有可过滤的对象。当用户点击“品牌”时，他们会进入工作页面，显示所有投资组合项目（不仅仅是品牌项目）。这是因为这个jquery脚本不支持哈希标记。也就是说，筛选的投资组合的每个状态都没有与其关联的URL。我希望添加此功能，但不确定从何处开始

---

我注意到有一个似乎正是我需要的解决方案。有人能帮助我如何添加对hashtags的支持，或者在这个hashchange插件中使用它们吗？提前谢谢

不确定这是否是处理此问题的最佳方法，但我提出的解决方案是将hashtag分配给nav中的每个锚链接。我应用了以下jquery使其工作：

var thispage = window.location.hash;

if(thispage == ''){
    $('ul#filter li:nth-child(1)').addClass('current');
}
if(thispage == '#brand-id'){
    $('ul#filter li:nth-child(2)').addClass('current');
}
if(thispage == '#print'){
    $('ul#filter li:nth-child(3)').addClass('current');
}
if(thispage == '#book-and-editorial'){
    $('ul#filter li:nth-child(4)').addClass('current');
}
if(thispage == '#web'){
    $('ul#filter li:nth-child(5)').addClass('current');
}
if(thispage == '#packaging'){
    $('ul#filter li:nth-child(6)').addClass('current');
}
if(thispage == '#exhibit'){
    $('ul#filter li:nth-child(7)').addClass('current');
}

var currentpage = thispage.replace('#','');

$('ul#portfolio li').each(function() {
    if(!$(this).hasClass(currentpage)) {
        $(this).hide().addClass('hidden');
    } else {
        $(this).show().removeClass('hidden');
    }
});

---

它看起来有些臃肿，但有没有更好的方法来实现这一点，也许可以将其构建到原始脚本中？

下面是一个使用hashchange的示例，效果非常好：顺便提一下：为什么要显示/隐藏元素并添加/删除

.hidden

CSS类？CSS类还不够吗？如果我删除show/hide，脚本将无法工作！知道如何为每个链接集成哈希/URL吗？