我编写了一个数据过滤器,用于商店的基本搜索。这是我的代码
<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;数据过滤器
答案 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");
}
});
});