按单个数据属性中的多个值过滤
[英] Filter by multiple values in a single data attribute
本文介绍了按单个数据属性中的多个值过滤的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个脚本，它将通过元素的数据属性值过滤元素.但我想扩展它，以便每个元素可以在其数据属性中包含多个值，如下所示:data-tag="['tag_2', 'tag_3']".
如何更改脚本以遍历所有值并按每个值进行过滤?
JS:
$('.btn-group').on('click', '.btn', function() {var value = $(this).attr('data-filter');如果(值==所有"){$('.item').fadeIn('800');} 别的 {$(".item").not('[data-tag="' + value + '"]').fadeOut('1000');$('.item').filter('[data-tag="' + value + '"]').fadeIn('1000');}$(this).addClass('active').siblings().removeClass('active');});
html:
<button class="btn btn-default active" data-filter="all">All</button><button class="btn btn-default" data-filter="tag_1">标签1</button><button class="btn btn-default" data-filter="tag_2">标签2</button><button class="btn btn-default" data-filter="tag_3">标签3</button><button class="btn btn-default" data-filter="tag_4">标签4</button>
<div class="masonry"><div class="item" data-tag="['tag_2', 'tag_3']"><div class="item-content"><h4>标签2</h4>
<div class="item" data-tag="['tag_1', 'tag_4']"><div class="item-content"><h4>标签1</h4>
<div class="item" data-tag="tag_2"><div class="item-content"><h4>标签2</h4>
<div class="item" data-tag="tag_4"><div class="item-content"><h4>标签4</h4>
<div class="item" data-tag="tag_2"><div class="item-content"><h4>标签2</h4>
<div class="item" data-tag="tag_1"><div class="item-content"><h4>标签1</h4>
<div class="item" data-tag="tag_3"><div class="item-content"><h4>标签3</h4>
<div class="item" data-tag="tag_4"><div class="item-content"><h4>标签4</h4>
<div class="item" data-tag="tag_2"><div class="item-content"><h4>标签2</h4>
<div class="item" data-tag="tag_3"><div class="item-content"><h4>标签3</h4>
我尝试了类似的东西:
var items = $('.item').filter(function () {返回 $.inArray($(this).data("tag"), value) >-1;});
但没有运气.
这里是 JsFiddle.
解决方案
要实现这一点，您可以使用 filter() 方法来仅选择 .item 元素在 data-tag 中存储的数组中有匹配的值.试试这个:
var $items = $('.item');$('.btn-group').on('click', '.btn', function() {var value = $(this).data('filter');如果(值==所有"){$items.fadeIn(800);} 别的 {var $selected = $items.filter(function() {返回 $(this).data('tag').indexOf(value) != -1;}).淡入(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">标签1</button><button class="btn btn-default" data-filter="tag_2">标签2</button><button class="btn btn-default" data-filter="tag_3">标签3</button><button class="btn btn-default" data-filter="tag_4">标签4</button>
<div class="masonry"><div class="item" data-tag="['tag_2', 'tag_3']"><div class="item-content"><h4>标签 2 &标签 3/h4
<div class="item" data-tag="['tag_1', 'tag_4']"><div class="item-content"><h4>标签 1 &标签 4/h4
<div class="item" data-tag="tag_2"><div class="item-content"><h4>标签2</h4>
<div class="item" data-tag="tag_3"><div class="item-content"><h4>标签3</h4>
<div class="item" data-tag="tag_4"><div class="item-content"><h4>标签4</h4>
<div class="item" data-tag="tag_3"><div class="item-content"><h4>标签3</h4>
<div class="item" data-tag="tag_2"><div class="item-content"><h4>标签2</h4>
<div class="item" data-tag="tag_1"><div class="item-content"><h4>标签1</h4>
<div class="item" data-tag="tag_3"><div class="item-content"><h4>标签3</h4>
<div class="item" data-tag="tag_4"><div class="item-content"><h4>标签4</h4>
<div class="item" data-tag="tag_2"><div class="item-content"><h4>标签2</h4>
<div class="item" data-tag="tag_3"><div class="item-content"><h4>标签3</h4>
<div class="item" data-tag="tag_4"><div class="item-content"><h4>标签4</h4>
I have a script which will filter elements by their data attribute values. But I would like to extend it so that each element can contain multiple values in its data attribute, like this: data-tag="['tag_2', 'tag_3']".
How can I change the script in order to loop through all the values and filter by each of them?
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>
I tried with something like:
var items = $('.item').filter(function () {
return $.inArray($(this).data("tag"), value) > -1;
});
But with no luck.
JsFiddle here.
解决方案
To achieve this you can use the filter() method to select only the .item elements who have the matching value in the array you store in data-tag. Try this:
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>
这篇关于按单个数据属性中的多个值过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
