Question

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

过滤依据：

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

我目前有这个。但是，它不适用于其中有空格的类别，而且＆amp;工作中。我怎样才能让它适用于包含空格的类别，例如：超级冰沙？

$(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（过滤器）

1 个答案: