Question

在测试了此处和网络其他部分的各种解决方案后，我无法弄清楚这样做的逻辑＆＃34;简单＆＃34;方式（或使其工作）。

我有以下列表：

<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

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'而不是!=来检查它是否在数据属性中包含该词。

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

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();
        }
    });
});

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

Answer 3

var stores = $('ul.store-list > li');

$('button.a').on('click', function(){
    stores.fadeIn(':hidden').not('li[data-categories~="Ties"]', stores).fadeOut();  
});

$('button.b').on('click', function(){
   stores.fadeIn(':hidden').not('li[data-categories~="Shoes"], li[data-categories~="Ties"]', stores).fadeOut();  
});

$('button.c').on('click', function(){
   stores.fadeIn(':hidden').not('li[data-categories~="Menswear"]', stores).fadeOut();  
});

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.1/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>

Answer 4

绝不使用$("script['data-invalid']").remove(); - 所以一旦他们离开，他们就会消失。

没有任何数据类别使用单个值，因此检查.fadeIn()或=永远不会给出完全匹配，请使用!=来匹配单词：

https://api.jquery.com/attribute-contains-word-selector/

[Joel提供了代码答案，所以在此停止]

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

4 个答案: