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

Question

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

我有以下列表:

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

我尝试使用属性不等于选择器,但这绝对不起作用.

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

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

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

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

所以Q是; 如何根据我选择的过滤器显示/隐藏列表项？
看到我的小提琴.

Answer 1

试试这个:

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>

正如您所看到的,我使用data~='item'而不是!=那种方式来检查它是否包含data-attribute上的那个单词.

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

Answer 2

我认为这里的错误观念是data-*属性在类中用空格分隔多个值.不是这样,在这里你只是将arbtirary data-categories属性设置为包含空格的单个字符串,因此尝试匹配任何给定的单个类别可能不起作用.另外,您可以遍历所有元素并将其data-categories属性与目标进行模式匹配,例如:

$('button.a').on('click', function(){
    stores.find('li').each(function() {
        if($(this).attr("data-categories").split(" ").indexOf('Ties') == -1) {
           $(this).fadeOut();
        }
    });
});

更好的方法可能是实际使用类而不是数据属性,然后您可以根据没有类来轻松进行选择.