Question

我有一个li类的列表，其类别已添加到类中。 1表示它与该类别相关联，0表示不与该类别相关联。首次访问该页面时，它们将全部显示在＆＃34;查看全部＆＃34;。点击＆＃34; Fruits＆＃34;将显示所有具有＆＃34; fruits-1＆＃34;在他们中。点击＆＃34;查看全部＆＃34;将显示所有项目。

过滤依据：

<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

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

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

Answer 2

假设你有这个

<ul class="listed-values">

   <li class="fruit,veg,nuts,drink">Product 1</li>
   <li class="drink">Product 2</li>
   <li class="veg,nuts,drink">Product 3</li>
   <li class="veg,nuts">Product 4</li>

</ul>

和这一个

<ul class="filter-ul">

  <li><a href="">Fruit</a></li>
  <li><a href="">Veg</a></li>
  <li><a href="">Nuts</a></li>
  <li><a href="">Drink</a></li>

</ul>

这是jquery代码

$(document).ready(function(){
    $(".filter-ul li a").click(function(){
        var text = $(this).text().toLowerCase();
        $('ul.listed-values li').hide();
        $('ul.listed-values li').filter(function(){
           return $(this).attr('class').indexOf(text) != -1;
        }).show();
    })
})

Answer 3

为每个过滤器添加data-category属性，以指示它应显示的类别。然后在选择器中使用它来匹配产品的类。

分隔多个类的正确方法是使用空格，而不是逗号。

＆＃13;

$("#filters a").click(function() {
  var category = $(this).data("category");
  $("#products li").hide();
  $("#products li." + category).show();
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="products">

  <li class="fruit veg nuts drink">Product 1</li>
  <li class="drink">Product 2</li>
  <li class="veg nuts drink">Product 3</li>
  <li class="veg nuts">Product 4</li>

</ul>

Filter by:

<ul id="filters">

  <li><a href="" data-category="fruit">Fruit</a>
  </li>
  <li><a href="" data-category="veg">Veg</a>
  </li>
  <li><a href="" data-category="nuts">Nuts</a>
  </li>
  <li><a href="" data-category="drink">Drinks</a>
  </li>

</ul>

＆＃13;

Answer 4

$('.links li a').on('click',function(e){
  e.preventDefault();
  var className = $(this).text().toLowerCase();
  $(".content li").not('.' + className).hide();
  $(".content li" + "." + className).show();
})

.content li{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="links">
  <li><a href="">Fruit</a> </li>
  <li><a href="">Veg</a> </li>
  <li><a href="">Nuts</a></li>
  <li><a href="">Drinks</a></li>
</ul>
<ul class="content">
  <li class="fruit veg nuts drinks">Product 1</li>
  <li class="drinks">Product 2</li>
  <li class="veg nuts drinks">Product 3</li>
  <li class="veg nuts">Product 4</li>
</ul>

Answer 5

在html类中，用空格分隔，而不是用逗号分隔。

html代码：

<ul class="products">
    <li class="fruit veg nuts drink">Product 1</li>
    <li class="drink">Product 2</li>
    <li class="veg nuts drink">Product 3</li>
    <li class="veg nuts">Product 4</li>
</ul>

<ul>
    <li><a href="" class='category'>Fruit</a></li>
    <li><a href="" class='category'>Veg</a></li>
    <li><a href="" class='category'>Nuts</a></li>
    <li><a href="" class='category'>Drinks</a></li>
</ul>

JS代码：

$(function() {
    $(".category").on("click", function(e) {
        e.preventDefault();
        var products = $(".products").find("li"); 
        products.show();

        var cat = $(this).text();
        products.not('.'+cat.toLowerCase()).hide();
    });
});

您可以在此处找到工作演示：http://jsfiddle.net/crL054px/

Answer 6

试试这个

JS Fiddle在这里http://jsfiddle.net/cfzdq7f7/

<强> HTML

<ul>

<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>

</ul>


<ul>

<li class="category">Fruit</li>
<li class="category">Veg</li>
<li class="category">Nuts</li>
<li class="category">Drinks</li>

</ul>

<强>的Javascript

$(document).ready(function() {
   $(".category").click(function() {
      if($(this).html() == "Fruit") {
        $(".veg").hide();
        $(".nuts").hide();
        $(".drink").hide();
        $(".fruit").show();
      } else if($(this).html() == "Veg") {
        $(".fruit").hide();
        $(".nuts").hide();
        $(".drink").hide();
        $(".veg").show();
      } else if($(this).html() == "Nuts") {
        $(".fruit").hide();
        $(".veg").hide();
        $(".drink").hide();
        $(".nuts").show();
      } else if($(this).html() == "Drinks") {
        $(".fruit").hide();
        $(".nuts").hide();
        $(".veg").hide();
        $(".drink").show();
      }
   });

});

<强> CSS

.fruit, .veg, .nuts, .drink {
    display:none;
}
.category {
    cursor:pointer;
}

让我知道它是否有用

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

6 个答案: