根据所选类别隐藏或显示 LI（过滤器）

Question

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

过滤条件：

<ul class="categories">
<li><a href="">View All</a></li>
<li><a href="">Fruits</a></li>
<li><a href="">Vegetables</a></li>
<li><a href="">Super Smoothies</a></li>
<li><a href="">Coffee and Tee</a></li>
<li><a href="">Nuts</a></li>
<li><a href="">Desserts & Cakes</a></li>
</ul>

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

我目前有这个。但是，它不适用于其中包含 space 的类别，但 & 正在运行。我怎样才能让它适用于其中包含 space 的类别，例如超级冰沙？

$(function () {
    $('ul.categories li a').click(function (e) {
        e.preventDefault();
        var category = $(this).text().toLowerCase().split("&");

        if (category[0] == "view all") {
            $('ul.items li').show();
        } else {
            //hide all categories
            $('ul.items li').hide();
            $.each(category, function (i, v) {
                $('ul.items li.' + v.trim() + "-1").show();
            });
        }
    });
});

Answer 1

使用 split(" ") 而不是 split("&") 并更改查看所有条件，如下所示

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="categories">
<li><a href="">View All</a></li>
<li><a href="">Fruits</a></li>
<li><a href="">Vegetables</a></li>
<li><a href="">Super Smoothies</a></li>
<li><a href="">Coffee and Tee</a></li>
<li><a href="">Nuts</a></li>
<li><a href="">Desserts & Cakes</a></li>
</ul>

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

希望对您有所帮助:)

根据所选类别隐藏或显示 LI（过滤器）

Hide or show LI based on the category that is selected (filter)

html

javascript

jquery

filter

categories