我有一个过滤器类,用于过滤驻留在页面内的产品。如果有人检查过滤器,则有一个功能可用。
过滤器是复选框,其中每个复选框都包含不同的值。
我的过滤功能的作用是检查页面中所有选中的复选框,然后使用列表中的data-*
全局变量来决定要显示的元素。
项目的DOM结构将是:
<body>
<ul class="products">
<li class="product" data-company="something" data-flavour="something"></li>
<li class="product" data-company="something" data-flavour="something"></li>
.
.
.
.
<li class="product" data-company="something" data-flavour="something"></li>
</ul>
</body>
下面显示了完成工作的功能。
this.filterGridProducts = function() {
$.ajax({
type: 'POST',
url: 'test12.php',
data: category,
success: function(data) {
$('#limitpage').html(data);
// $('.product').hide();
var filteredProducts =$('.product');
//filter by colour, size, shape etc
var filterAttributes = $('input[type="checkbox"]');
var selectedFiltersValues = [];
// for each attribute check the corresponding attribute filters selected
filterAttributes.each(function() {
if (this.checked) {
var currentFilter = $(this);
selectedFiltersValues.push("[data-" + currentFilter.attr('name') + "='" + currentFilter.val() + "']");
filteredProducts = filteredProducts.filter(selectedFiltersValues.join(','));
}
});
filteredProducts = filteredProducts.filter(function() {
return ($(this).attr('data-price') > first && $(this).attr('data-price') <= second);
});
//console.log($('.product').show());
filteredProducts.each(function(e) {
console.log($(this).html().show()); // not working
$(this).show(); // not working
})
filteredProducts.show(); // this one is not working as well.
}
});
};
filteredProducts
确实包含需要过滤的元素,但我似乎无法展示它。
上面函数中的Ajax调用加载了db中存在的所有元素,来自它的产品都被隐藏了。
.show()
不起作用的可能原因是什么?
更新