jquery过滤列表选择

Question

我已经完成了这个tutorial关于'创建一个带有jQuery'可过滤的“Portfolio”来自nettuts +，并且想要稍微微调一下。

我想不是点击顶部的导航栏，而是根据点击的内容点击每个类别的过滤器，我想点击一个'设计'，如果点击另一个'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; 
    }); 
});