jquery - 按单个数据属性中的多个值过滤
问题描述
我有一个脚本,它将按元素的数据属性值过滤元素。但我想扩展它,以便每个元素可以在其数据属性中包含多个值,如下所示data-tag="['tag_2', 'tag_3']"
:
如何更改脚本以遍历所有值并按每个值进行过滤?
JS:
$('.btn-group').on('click', '.btn', function() {
var value = $(this).attr('data-filter');
if (value == "all") {
$('.item').fadeIn('800');
} else {
$(".item").not('[data-tag="' + value + '"]').fadeOut('1000');
$('.item').filter('[data-tag="' + value + '"]').fadeIn('1000');
}
$(this).addClass('active').siblings().removeClass('active');
});
html:
<div class="btn-group" role="group">
<button class="btn btn-default active" data-filter="all">All</button>
<button class="btn btn-default" data-filter="tag_1">Tag 1</button>
<button class="btn btn-default" data-filter="tag_2">Tag 2</button>
<button class="btn btn-default" data-filter="tag_3">Tag 3</button>
<button class="btn btn-default" data-filter="tag_4">Tag 4</button>
</div>
<div class="masonry">
<div class="item" data-tag="['tag_2', 'tag_3']">
<div class="item-content">
<h4>Tag 2</h4>
</div>
</div>
<div class="item" data-tag="['tag_1', 'tag_4']">
<div class="item-content">
<h4>Tag 1</h4>
</div>
</div>
<div class="item" data-tag="tag_2">
<div class="item-content">
<h4>Tag 2</h4>
</div>
</div>
<div class="item" data-tag="tag_4">
<div class="item-content">
<h4>Tag 4</h4>
</div>
</div>
<div class="item" data-tag="tag_2">
<div class="item-content">
<h4>Tag 2</h4>
</div>
</div>
<div class="item" data-tag="tag_1">
<div class="item-content">
<h4>Tag 1</h4>
</div>
</div>
<div class="item" data-tag="tag_3">
<div class="item-content">
<h4>Tag 3</h4>
</div>
</div>
<div class="item" data-tag="tag_4">
<div class="item-content">
<h4>Tag 4</h4>
</div>
</div>
<div class="item" data-tag="tag_2">
<div class="item-content">
<h4>Tag 2</h4>
</div>
</div>
<div class="item" data-tag="tag_3">
<div class="item-content">
<h4>Tag 3</h4>
</div>
</div>
</div>
我尝试过类似的东西:
var items = $('.item').filter(function () {
return $.inArray($(this).data("tag"), value) > -1;
});
但没有运气。
解决方案
为此,您可以使用该filter()
方法仅选择.item
在您存储的数组中具有匹配值的元素data-tag
。试试这个:
var $items = $('.item');
$('.btn-group').on('click', '.btn', function() {
var value = $(this).data('filter');
if (value == "all") {
$items.fadeIn(800);
} else {
var $selected = $items.filter(function() {
return $(this).data('tag').indexOf(value) != -1;
}).fadeIn(1000);
$items.not($selected).fadeOut(1000);
}
$(this).addClass('active').siblings().removeClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="btn-group" role="group">
<button class="btn btn-default active" data-filter="all">All</button>
<button class="btn btn-default" data-filter="tag_1">Tag 1</button>
<button class="btn btn-default" data-filter="tag_2">Tag 2</button>
<button class="btn btn-default" data-filter="tag_3">Tag 3</button>
<button class="btn btn-default" data-filter="tag_4">Tag 4</button>
</div>
<div class="masonry">
<div class="item" data-tag="['tag_2', 'tag_3']">
<div class="item-content">
<h4>Tag 2 & Tag 3</h4>
</div>
</div>
<div class="item" data-tag="['tag_1', 'tag_4']">
<div class="item-content">
<h4>Tag 1 & Tag 4</h4>
</div>
</div>
<div class="item" data-tag="tag_2">
<div class="item-content">
<h4>Tag 2</h4>
</div>
</div>
<div class="item" data-tag="tag_3">
<div class="item-content">
<h4>Tag 3</h4>
</div>
</div>
<div class="item" data-tag="tag_4">
<div class="item-content">
<h4>Tag 4</h4>
</div>
</div>
<div class="item" data-tag="tag_3">
<div class="item-content">
<h4>Tag 3</h4>
</div>
</div>
<div class="item" data-tag="tag_2">
<div class="item-content">
<h4>Tag 2</h4>
</div>
</div>
<div class="item" data-tag="tag_1">
<div class="item-content">
<h4>Tag 1</h4>
</div>
</div>
<div class="item" data-tag="tag_3">
<div class="item-content">
<h4>Tag 3</h4>
</div>
</div>
<div class="item" data-tag="tag_4">
<div class="item-content">
<h4>Tag 4</h4>
</div>
</div>
<div class="item" data-tag="tag_2">
<div class="item-content">
<h4>Tag 2</h4>
</div>
</div>
<div class="item" data-tag="tag_3">
<div class="item-content">
<h4>Tag 3</h4>
</div>
</div>
<div class="item" data-tag="tag_4">
<div class="item-content">
<h4>Tag 4</h4>
</div>
</div>
</div>