我正在尝试.filter在jQuery中使用。使用此功能，我可以显示特定数据。但是我的问题是，当我单击all它时，它会隐藏所有内容。
$.ajax({
url: '/api/Item',
type: 'GET',
dataType: 'JSOn',
async: false,
success: function(res) {
for (var i = 0; i < res.length; i++) {
$('#Container').append('' +
'<div class="col-md-3 col-sm-6 col-xs-12 portfolio-item" data-brand="' + res[i].productBrand + '">' +
'<div class="portfolio-wrapper">' +
'<div class="portfolio-thumb">' +
'<img src="' + res[i].imageIcon + '" alt="" />' +
'</div>' +
'<div class="label-text">' +
'<h3 style="color: #04a185; font-family: VAG Rounded";>' + res[i].productName + '</h3>' +
'</div>' +
'</div>' +
'</div>' +
'')
}
}
})
posts = $('.portfolio-item')
$("#filters li span").click(function() {
var customType = $(this).attr('data-filter') // category
posts.hide().filter(function() {
return $(this).data('brand') === customType;
}).show();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="filters" class="clearfix">
<li><span class="filter" data-filter="all"><h1>All</h1></span></li>
<li><span class="filter" data-filter="Blooming"><h1>Blooming </h1></span></li>
<li><span class="filter" data-filter="Sparkling"><h1>Sparkling </h1></span></li>
<li><span class="filter" data-filter="Sets"><h1>Sets</h1></span></li>
</ul>要使此工作有效，您可以检查customType是all 还是单击的值。尝试这个：
var $posts = $('.portfolio-item')
$("#filters li span").click(function() {
var customType = $(this).data('filter');
$posts.hide().filter(function() {
return customType === 'all' || $(this).data('brand') === customType;
}).show();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="filters" class="clearfix">
<li><span class="filter" data-filter="all"><h1>All</h1></span></li>
<li><span class="filter" data-filter="Blooming"><h1>Blooming </h1></span></li>
<li><span class="filter" data-filter="Sparkling"><h1>Sparkling </h1></span></li>
<li><span class="filter" data-filter="Sets"><h1>Sets</h1></span></li>
</ul>
<div class="portfolio-item" data-brand="Blooming">
Blooming
</div>
<div class="portfolio-item" data-brand="Sparkling">
Sparkling
</div>
<div class="portfolio-item" data-brand="Sets">
Sets
</div>
<div class="portfolio-item" data-brand="Blooming">
Blooming
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句