如何使用jQuery和CSS过滤具有多个值的列表？

在测试了此处和网络其他部分的各种解决方案之后,我无法弄清楚以“简单”方式执行此操作的逻辑(或使其完全可用).

我有以下列表：

<ul class="store-list">
    <li data-categories="Bags Shoes Accessories Belts">
        <h3 itemprop="name">Enzo Poli</h3>
    </li>
    <li data-categories="Womenswear Shoes">
        <h3 itemprop="name">Ilse Jacobsen</h3>
    </li>
    <li data-categories="Menswear Womenswear Shoes Ties">
        <h3 itemprop="name">Kiman (Shoes Ties)</h3>
    </li>
    <li data-categories="Menswear Womenswear Shoes Knitwear">
        <h3 itemprop="name">Riccovero</h3>
    </li>
</ul>

<button class="a">Ties</button>
<button class="b">Ties & Shoes</button>
<button class="c">Menswear</button>

我尝试过使用Attribute Not Equal Selector,但这绝对不行.

var stores = $('.store-list');

$('button.b').on('click',function(){
  stores.find('li[data-categories!="Ties"][data-categories!="Shoes"]').fadeOut();  
});

另一个问题是当我选择不同的类别时,隐藏的元素没有显示.

我知道我可以使用$.each()并遍历每个元素并使用大量代码来查看它是否包含类别并检查它是否可见.但我只是希望有一个更好,更简单的选择.

所以Q是;如何根据我选择的过滤器显示/隐藏列表项？
See my fiddle here.

解决方法

试试这个：

var stores = $('.store-list');

$('button.a').on('click',function() {
  stores.find('li').not('[data-categories~="Ties"]').fadeOut();
  stores.find('li[data-categories~="Ties"]').fadeIn();
});

$('button.b').on('click',function() {
  stores.find('li').not('[data-categories~="Ties"],[data-categories~="Shoes"]').fadeOut();
  stores.find('li[data-categories~="Ties"],[data-categories~="Shoes"]').fadeIn();
});

$('button.c').on('click',function() {
  stores.find('li').not('[data-categories~="Menswear"]').fadeOut();
  stores.find('li[data-categories~="Menswear"]').fadeIn();
});

body {
  font-size: 0.7em;
}
ul,li {
  list-style: none;
}
a {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="store-list">
  <li data-categories="Bags Shoes Accessories Belts">
    <h3 itemprop="name">Enzo Poli</h3>
  </li>
  <li data-categories="Womenswear">
    <h3 itemprop="name">Ilse Jacobsen</h3>
  </li>
  <li data-categories="Menswear Womenswear Shoes Ties">
    <h3 itemprop="name">Kiman (Shoes Ties)</h3>
  </li>
  <li data-categories="Menswear Womenswear Shoes Knitwear">
    <h3 itemprop="name">Riccovero</h3>
  </li>
</ul>

<button class="a">Ties</button>
<button class="b">Ties & Shoes</button>
<button class="c">Menswear</button>

正如你所看到的,我使用数据〜=’item’而不是！=这样它会检查它是否包含data-attribute上的那个单词.

此外,我强制那些具有该类别的人淡入,以便完成所有管理.当然有更好的方法来做到这一点,但这是默认的逻辑.

原文地址：https://www.jb51.cc/jquery/177377.html