0

我想要一个超级基本的过滤系统用于我的投资组合页面，所以当用户点击“品牌”时，只需使用品牌名称显示（其余部分隐藏），当用户点击打印设计时，只需打印显示上等

我使用过同位素和流沙，但这次我想要一种非常基本的方法来做到这一点而没有任何影响。所以我选择使用这个脚本。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。我正在寻找添加此功能，但不确定从哪里开始。

我注意到有一个hashchange 插件似乎正是我需要的解决方案。有人可以帮助我如何添加对主题标签的支持或将它们与这个 hashchange 插件一起使用吗？提前致谢！

4

1 回答 1

0

不确定这是否是处理此问题的最佳方法，但我想出的解决方案是将主题标签分配给导航中的每个锚链接。我应用了以下 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');
    }
});

它看起来很臃肿，但是有没有更好的方法来解决这个问题，也许将它构建到原始脚本中？

于 2012-05-03T19:37:24.433 回答