Question

我正在修改现有网站的A-Z目录，它是使用jQuery的过滤列表。点击所有即可显示所有部门。每个A-Z部分都在其自己的div中与一个匹配的类组合在一起，例如，所有以 A 开头的部门都有一个带有“A”类的div。

点击 GILROY 时，我需要以相同的方式过滤掉列表中的其他一组项目。我在这些列表项中添加了“gilroy”类。

花了几个小时尝试使用过滤破译类似的例子后，我意识到我只是不明白如何正确编码它，这是一个时间敏感的项目。任何协助或指向正确的方向将不胜感激。

我正在修改的现有代码如下，请参阅css＆amp;的jsfiddle链接。 HTML

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

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

        if(filterVal == 'ALL') {
            $('div#departments div').addClass('column');
            $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden');
        } else {
            $('div#departments div.column').fadeIn('fast').removeClass('column');

            $('div#departments div div').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('fast').addClass('hidden');
                } else {
                    $(this).fadeIn('fast').removeClass('hidden');
                }
            });
        } 

        return false;
    });
});

jsfiddle

Answer 1

为if-then-else GILROY添加另一个案例。在这种情况下，显示所有内容，就像ALL案例一样，但使用.gilroy隐藏除li类.not('.gilroy')元素之外的所有元素。确保show()每个更改上的所有li元素都重置过滤器：

$('div#departments li').show();
if(filterVal == 'GILROY') {
    $('div#departments div').addClass('column');
    $('div#departments li').not('.gilroy').hide();
    $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden');
} else if(filterVal == 'ALL') {
    $('div#departments div').addClass('column');
    $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden');
} else {
    ...
}

演示：http://jsfiddle.net/8u26c/

Answer 2

这个应该与“Gilroy”以及您可能决定添加的任何其他类似过滤器一起使用。您可以使用类div和空GILROY（您的jsfiddle的早期版本中已经存在）空ul，然后在{{{{ 1}}阻止：

else

演示：http://jsfiddle.net/82Vmw/

使用jQuery按类过滤列表项

2 个答案: