Jquery 按单个数据属性中的多个值进行筛选

我有一个脚本，它将根据元素的数据属性值过滤元素。但我想对其进行扩展，使每个元素的数据属性中都可以包含多个值，如下所示：

data tag=“['tag\u 2'，'tag\u 3']”

如何更改脚本以循环遍历所有值并按每个值进行筛选

Js:

html:

但是没有运气

---

.

要实现这一点，您可以使用

filter（）

方法仅选择在存储在

数据标记中的数组中具有匹配值的
.item
元素。试试这个：


var$items=$（'.item'）；
$（'.btn group'）。在（'单击'，'.btn'，函数（）上{
var值=$（this.data（'filter'）；
如果（值=“全部”）{
$items.fadeIn（800）；
}否则{
var$selected=$items.filter（函数（）{
返回$（this）.data（'tag'）.indexOf（value）！=-1；
}).fadeIn（1000）；
$items.not（$selected）.fadeOut（1000）；
}
$（this.addClass（'active'）.sides（）.removeClass（'active'）；
});

全部的
标签1
标签2
标签3
标签4
标签2&；标签3
标签1&；标签4
标签2
标签3
标签4
标签3
标签2
标签1
标签3
标签4
标签2
标签3
标签4
太棒了。非常感谢你。
$('.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');
});

<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;
});