如何在使用数据过滤器时隐藏“全部”？

I've coded up a data filter for a basic search for shops. here is my code

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

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

Is there anyway that the items that don't feature "fave" can be hidden from the main selection?

无论如何,那些不具有“fave”功能的项目可以隐藏在主选项中吗?

Here is the site I'm using it for, click shopping and you'll see what I mean Skate Hut shouldn't be visible as it doesn't have the 'fave' data filter

这是我正在使用它的网站,点击购物,你会看到我的意思Skate Hut不应该是可见的,因为它没有'fave'数据过滤器

http://www.thatcreativething.com//shopper/index.html

1 个解决方案

#1

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");
    }
  });
});