使用JQuery基于多个类进行过滤

Question

我有这个脚本，基本上会显示基于类名的产品。因此，如果li的类名为'c2'，它将显示产品c2，如果li具有类名'b8f b12r a12 ps10'，则应显示所有这些产品b8f b12r a12 ps10。

我遇到的问题是它唯一过滤/显示具有单个类名而不是多个类名的选择器。我明白这是因为var = filter中的$（this），但是当我手动输入类名时它也没有显示。

剧本

 $('#products ul li').hide();
 $('#outlet li').click(function(e){
      e.preventDefault();
      var filter = $(this).attr('class');
      $('#products ul li').show();
      $('#products ul li:not(.' + filter + ')').hide();

选择器

<ul id="outlet">
     <li class="c2">2</li>
     <li class="d145">7</li>
     <li class="b8f b12r a12 ps10">8</li>
</ul>

产品

 <ul id="products">
      <li class="c2"><img src="images/c2.png">c2</li>
      <li class="d145"><img src="images/d145.png">d145</li>
      <li class="b8f"><img src="images/b8f.png">b8f</li>
      <li class="b12r"><img src="images/b12r.png">b12r</li>
      <li class="a12"><img src="images/a12.png">a12</li>
      <li class="ps10"><img src="images/ps10.png">ps10</li>
 </ul>

Answer 1

试试这个：

$('#products ul li').show();
$('#products ul li').not('.' + $(this).attr('class').split(' ').join(', .')).hide();

我更喜欢使用单独的not功能，因为它看起来更干净。这应该导致not子句看起来像这样：

$('#products ul li').not('.c2, .d145, .a12').hide();

您的选择器也有错误，您选择的是#products ul li，而ul的ID为#products，因此它应该是#products li。

Answer 2

尝试这样的事情：

$('#outlet li').click(function(e){
    e.preventDefault();
    $('#products ul li').hide();
    var classes = $(this).attr('class').split(' '); // create an array of class names
    $.each(classes, function() { // iterate over array 
        $('#products ul li.' + this).show();
    });
});