【发布时间】：2020-09-30 09:16:17
【问题描述】：
我正在尝试为我的产品列表构建过滤功能。如果选择了一个或多个属性，它应该淡出不匹配的元素。如果一个过滤器被移除，它也应该再次淡入。我想我的问题是，如果数组不是 100% 匹配，我就得不到真实的陈述。
希望您能理解我的问题并帮助我:-)。提前致谢！
$(document).ready(function(){
$('.product-filter ul > li').click(function() {
$(this).find('.level2').slideToggle();
});
$('.product-list-teaser').each(function() {
var data = $(this).attr('data-filter'),
data = data.split(' '),
data = data.filter(Boolean),
data = data.sort();
$(this).attr('data-filter', data);
})
$('.product-filter .level2 li').click(function() {
var content = $(this).text();
$('.filter').append('<li>' + content + ' <span class="delete"></span></li>');
var contentList = $('.filter li').text(),
contentList = contentList.split(' '),
contentList = contentList.filter(Boolean),
contentList = contentList.sort();
$('.product-list-teaser').each(function() {
if($(this).attr('data-filter') == contentList) {
$(this).fadeIn();;
}
else {
$(this).fadeOut();
}
})
});
$('.filter').on('click', 'li', function() {
$(this).closest('li').remove();
})
});.product-filter { position: relative; z-index: 20; }
.product-filter ul.categories { margin: 0; padding: 0;}
.product-filter ul.categories li { list-style: none; float: left; width: calc(((100% - 220px) / 12) * 4 + (3 * 20px) - 10px); border: solid 5px #e2000a; margin: 0 20px 20px 0; text-align: center; color: #e2000a; font-weight: 700; font-size: 25px; line-height: 30px; cursor: pointer; padding: 17px 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: relative;}
.product-filter ul.categories li:after { display: inline-block; width: 13px; height: 12px; background: url('../img/sub-toggle.png') no-repeat 0 0; background-size: 30px; margin-top: 7px; content: ""; margin-left: 10px; background-position: 0 -16px;}
.product-filter ul.categories li:hover { background: #e2000a; color: #fff;}
.product-filter ul.categories li:nth-child(3n+3) { margin-right: 0; }
.product-filter .categories .level2 { display: none; position: absolute; left: -5px; top: 64px; background: #fff; border: solid 5px #e2000a; z-index: 20; border-top: none; width: 100%; margin: 0; padding: 0;}
.product-filter .categories .level2 li { border: none; padding: 10px 0; color: #000; font-size: 18px; line-height: 25px; float: none; margin: 0; font-weight: 300; width: 100%}
.product-filter .categories .level2 li:after { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-wrap">
<div class="product-filter">
<ul class="categories">
<li>Category1
<ul class="level2">
<li>aerob</li>
<li>anaerob</li>
</ul>
</li>
<li>Category2
<ul class="level2">
<li>industry</li>
<li>electronic</li>
<li>mechanic</li>
</ul>
</li>
<li>Category3
<ul class="level2">
<li>white</li>
<li>blue</li>
<li>black</li>
</ul>
</li>
</ul>
<ul class="filter">
</ul>
</div>
<div class="product-inner-wrap">
<div class="product-list-teaser" data-filter="aerob industry blue">
<p>Product aerob industry blue</p>
</div>
<div class="product-list-teaser" data-filter="aerob industry white">
<p>Product aerob industry white</p>
</div>
</div>
</div>【问题讨论】：
-
您需要已选择的元素从下拉菜单中消失吗？
-
不，下拉菜单是我的过滤器。如果您选择了一个过滤器类别，它将作为过滤器列表添加到下拉列表和我的产品列表之间。因此，您可以看到当前哪个过滤器处于活动状态。如果单击活动过滤器的过滤器列表中的某个元素，则应删除该过滤器。 product-list-teaser 元素应使用所有活动过滤器进行过滤。
-
该功能似乎对我有用。我可以从下拉列表中添加一个或多个过滤器，当我单击下面的列表元素时，它已被删除。我看不出问题出在哪里。您介意分享更多信息或示例，以帮助我们了解您的问题吗？
-
对不起！我不擅长解释：D。如果你打开小提琴，它会更容易。如果你打开它，你可以看到我的下拉过滤器和我的产品示例“产品有氧工业蓝色”和“产品有氧工业白色”。如果您现在从下拉类别 1 > aerob 中选择，则两个产品都会消失，但它们不应该因为它们获得了数据过滤器“aerob”。想象它像一个商店过滤器。如果您选择蓝色，您想查看所有带有“蓝色”标签的产品，无论是鞋子还是衬衫。没有应该淡出的产品。如果您添加标签“鞋子”，则应该只有蓝色鞋子可见。
标签： javascript jquery filter