javascript – 根据点击的类别过滤器隐藏/显示项目

2019年7月22日 223次阅读

我有一个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或其他)来实现这一点,当我点击一个类别时,只显示那个属于该类别的类别？其余的都隐藏了？

最佳答案 试试这个：您可以使用点击锚点的文本来查找匹配的类别并显示它们.见下面的代码

$(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>
点赞