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

我有一个li项目列表，其类别已添加到类中。1表示它与该类别关联，0表示它不关联。当第一次访问页面时，它们都将显示“全部查看”。单击“水果”将显示其中包含“水果-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>

产品1
产品2
产品3
产品4
产品5
产品6
产品7
产品8

---

我应该对这些项目做些什么（添加类或ID或其他什么），以便在单击某个类别时，只显示属于该类别的项目？其余的都隐藏了吗？

试试这个：你可以使用点击的锚文本来找到匹配的类别并显示它们。请参阅下面的代码

$（函数（）{
$（'ul li a'）。单击（函数（e）{
e、 预防默认值（）；
var category=$（this.text（）.toLowerCase（）.split（“&”）；
如果（类别[0]=“查看全部”）
{
$（'ul.category li'）.show（）；
}
其他的
{
//隐藏所有类别
$（'ul.category li'）.hide（）；
$。每个（类别、功能（i、v）{
$（'ul.category li.'+v.trim（）+“-1”）.show（）；
});
}
});
});









产品1
产品2
产品3
产品4
产品5
产品6
产品7
产品8
假设你有这个

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

向每个筛选器添加
数据类别
属性，以指示应显示的类别。然后在选择器中使用它来匹配产品的类别

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


$（“#过滤器a”）。单击（函数（）{
var类别=$（此）.data（“类别”）；
$（“#产品li”）.hide（）；
$（“#产品李。”+类别）.show（）；
返回false；
});


产品1
产品2
产品3
产品4

筛选依据：










$（'.links li a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var className=$（this.text（）.toLowerCase（）；
$（“.content li”）.not（“.+className）.hide（）；
$（“.content li”+“+className）.show（）；
})
.content li{
显示：无；
}








产品1
产品2
产品3
产品4
在
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小提琴在这里

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>

CSS

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

让我知道这是否有用
多个类应该用空格分隔，而不是逗号。我的CMS输出我的过滤器，用逗号分隔：（是否使用javascript进行了相关操作？刚刚进行了编辑，请修改任何人？
（this）.text（）.toLowerCase（）
不适用于
饮料
，因为该类只包含
饮料
。兄弟，您可以从中删除s:）如果我有一个两个单词的类别，如“甜点和蛋糕”，该怎么办？您必须更改逻辑，然后更改选择器。无论我之前的格式如何，我刚刚修改了它，这是一个更容易使用的类别吗？如果我有一个两个单词的类别，比如“甜点和蛋糕”，那么您需要修改逻辑，以便阅读这两个类别，并将其放入jquery选择器中。示例：您需要将
甜点和蛋糕
拆分为数组，迭代数组并将其应用于jquery选择。请看我的最新答案。无论如何，它可以用逗号完成。我的CMS不会输出任何东西，除了用逗号分隔每个类别。还有别的办法吗？也许我们不使用类或数据标记？不管我以前的格式如何，我刚刚修改了它，这一个更容易使用吗？是的，这很容易使用。但是如果您想在类值中使用逗号，如
class=“veg，fruit，drink”
，则替换
$（'ul.category li.'+v.trim（））.show（）这一行带有
$（'ul.category li.'）.filter（函数（）{return$（this）.attr（'class'）.indexOf（v.trim（））！=-1；}.show（）这个代码如果我有一个两个单词的类别，比如“甜点和蛋糕”，那该怎么办？@kim Tran在这种情况下barmer的答案更好。不管我以前的格式如何，我刚刚修改了它，这个更容易使用吗？
$(function() {
    $(".category").on("click", function(e) {
        e.preventDefault();
        var products = $(".products").find("li"); 
        products.show();

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

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

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

});

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