jquery过滤列表选择

Question

我已经从 nettuts+ 完成了这个 tutorial 的“使用 jQuery 创建一个“可过滤的”投资组合”，并且想要稍微调整一下。

我不想点击顶部导航，每个类别都根据点击的内容进行过滤，我想点击一个“设计”，如果我点击另一个“CMS”，它们将显示两个类别中的项目。再次单击时将关闭该过滤器并显示所选内容。

所以，换句话说，我希望它显示我选择的内容，然后通过再次单击该类别来取消选择。

下面是我使用的JS文件：

$(document).ready(function() {
    $('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').fadeIn('slow').removeClass('hidden');
        } else {

            $('ul#portfolio li').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('normal').addClass('hidden');
                } else {
                    $(this).fadeIn('slow').removeClass('hidden');
                }
            });
        }

        return false;
    });
});

对此的任何帮助都会很棒。谢谢。

Answer 1

尝试维护一个切换元素的数组。我无法对此进行测试，但我认为它很接近。

编辑：现在已经过测试并且可以工作了。

$(document).ready(function() {
    $('ul#filter a').click(function() {
        $(this).toggleClass('toggled_filter').parent().toggleClass('current'); // toggle a class for its state
        $(this).css('outline','none');

        var filterValList = [];
        $('.toggled_filter').each(function(){
          // add each text item to the list
          filterValList.push($(this).text().toLowerCase().replace(' ','-'));
        });

        if($.inArray('all', filterValList) != -1 || filterValList.length === 0) {
          $('ul#filter li:first').addClass('current');
              $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
        } else {
              $('ul#filter li:first').removeClass('current');
              $('ul#portfolio li').each(function() {
                 var classes = $(this).attr('class').split(/\s+/);
                 // go through each of the classes on each element 
                 // and hide them if they aren't toggled on
                 var match_found = false;
                 for(var i in classes){  
                   if($.inArray(classes[i], filterValList) != -1) {
                     match_found = true;
                   }
                 }
                 // check and see if anything matched
                 if(!match_found){
                   $(this).fadeOut('normal').addClass('hidden');
                 } else {
                   $(this).fadeIn('slow').removeClass('hidden');
                 }

              });
        }
        return false;
    });
});