我怎样才能隐藏所有'何时使用数据过滤器?

时间:2016-05-04 19:52:31

标签: jquery

我编写了一个数据过滤器,用于商店的基本搜索。这是我的代码

<div class="row">
                <div class="col-md-12 wow animated fadeInUp">
                    <ul class="portfolio-filters text-center">
                        <li class="filter active" data-filter=".fave">Featured</li>
                        <li class="filter" data-filter=".design">arts & Crafts</li>
                        <li class="filter" data-filter=".html">Garden</li>
                        <li class="filter" data-filter=".wordpress">Gifts & Experiences</li>
                        <li class="filter" data-filter=".seo">Hair & Beauty</li>
                        <li class="filter" data-filter=".seo">Home</li>
                        <li class="filter" data-filter=".cloth">Clothing</li>
                        <li class="filter" data-filter=".seo">Office & Stationary</li>
                        <li class="filter" data-filter=".seo">Parenting & Children</li>
                        <li class="filter" data-filter=".sports">Sports & Fitness</li>
                        <li class="filter" data-filter=".seo">Tech & Gadgets</li>
                        <li class="filter" data-filter=".music">Music & Recreation</li>
                        <li class="filter" data-filter=".toys">Toys</li>
                        <li class="filter" data-filter=".seo">Travel</li>
                        <li class="filter" data-filter=".seo">Well-being</li>
                    </ul><!--.portfolio-filter nav-->

                    <div id="portfolio_list" class="row">

无论如何,那些不具备特色和物品的物品很少有。可以隐藏在主要选择中吗?

以下是我使用它的网站,点击购物,你会看到我的意思Skate Hut不应该被看见,因为它没有#& FAVE&#39;数据过滤器

here

1 个答案:

答案 0 :(得分:2)

HTML

<div class="row">
<div class="col-md-12 wow animated fadeInUp">
    <ul class="portfolio-filters text-center">
        <li class="filter active" data-filter=".fave">Featured</li>
        <li class="filter" data-filter=".design">arts & Crafts</li>
        <li class="filter" data-filter=".html">Garden</li>
        <li class="filter" data-filter=".wordpress">Gifts & Experiences</li>
        <li class="filter" data-filter=".seo">Hair & Beauty</li>
        <li class="filter" data-filter=".seo">Home</li>
        <li class="filter" data-filter=".cloth">Clothing</li>
        <li class="filter" data-filter=".seo">Office & Stationary</li>
        <li class="filter" data-filter=".seo">Parenting & Children</li>
        <li class="filter" data-filter=".sports">Sports & Fitness</li>
        <li class="filter" data-filter=".seo">Tech & Gadgets</li>
        <li class="filter" data-filter=".music">Music & Recreation</li>
        <li class="filter" data-filter=".toys">Toys</li>
        <li class="filter" data-filter=".seo">Travel</li>
        <li class="filter" data-filter=".seo">Well-being</li>
    </ul>
    <!--.portfolio-filter nav--> 
</div>
</div>
<button id="filter">Click</button>

的jQuery

$(document).on("click", "#filter", function() {
  $("li.filter").each( function() {
    if ($(this).attr("data-filter") !== ".fave") {
        $(this).css("display", "none");
    }
  });
});