0

我正在修改现有网站的 AZ 目录，它是使用 jQuery 过滤的列表。单击全部显示所有部门。每个 AZ 部分都在自己的 div 中分组，并带有一个匹配的类，例如，所有以A开头的部门都有一个带有“A”类的 div。

单击GILROY时，我需要以相同的方式过滤掉列表中的另一组项目。我已将“gilroy”类添加到这些列表项中。

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

我正在修改的现有代码如下，请参阅 css & html 的 jsfiddle 链接。

$(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

4

2 回答 2

0

if-then-else在您的for中添加另一个案例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/

于 2013-02-21T20:29:59.430 回答
0

这个应该与“Gilroy”和您可能决定添加的任何其他类似过滤器一起使用。你可以有一个空div的类GILROY和一个空的ul（这似乎已经存在于你的 jsfiddle 的早期版本中），然后在你的else块中添加以下代码段：

if (filterVal.length > 1) { //can hard-code this to check for "GILROY" instead, if you want
    var targetList = $('div.' + filterVal + ' ul');
    $('li.' + filterVal.toLowerCase()).each(function() {
        targetList.append($(this));
    });                
}

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

于 2013-02-21T20:45:08.790 回答