javascript - 根据单击的类别过滤器隐藏/显示 li 项

Question

我有一个 li 项目的列表，其类别已添加到类中。 1 表示它与该类别关联，0 表示不关联。第一次访问该页面时，它们都会出现“查看全部”。单击“Fruits”将显示所有包含“fruits-1”的项目。单击“查看全部”将显示所有项目。

筛选依据:

<ul>

<li><a href="">View All</a></li>
<li><a href="">Fruits</a></li>
<li><a href="">Vegetables</a></li>
<li><a href="">Nuts</a></li>
<li><a href="">Desserts & Cakes</a></li>

</ul>

<ul>
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li>
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li>
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li>
</ul>

我应该如何处理这些项目(添加类或 ID 或其他)，以便在我单击一个类别时，只显示属于该类别的项目？其余的是隐藏的？

Answer 1

试试这个:您可以使用单击 anchor 的文本来查找匹配的类别并显示它们。看下面代码

$(function(){
  $('ul li a').click(function(e){
    e.preventDefault();
    var category = $(this).text().toLowerCase().split("&");
    if(category[0]=="view all")
    {
      $('ul.category li').show();
    }
    else
    {
       //hide all categories
       $('ul.category li').hide();
       $.each(category, function(i, v){
         $('ul.category li.'+v.trim()+"-1").show();
       });
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>

<li><a href="">View All</a></li>
<li><a href="">Fruits</a></li>
<li><a href="">Vegetables</a></li>
<li><a href="">Nuts</a></li>
<li><a href="">Desserts & Cakes</a></li>

</ul>

<ul class="category">
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li>
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li>
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li>
</ul>