按单个数据属性中的多个值过滤

Question

我有一个脚本可以根据数据属性值过滤元素。但我想扩展它，以便每个元素都可以在其数据属性中包含多个值，如下所示：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;
});

但运气不好。

JsFiddle here.

Answer 1

要实现这一点，您可以使用 filter() 方法来 select 只有 .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 &amp; Tag 3</h4>
    </div>
  </div>
  <div class="item" data-tag="['tag_1', 'tag_4']">
    <div class="item-content">
      <h4>Tag 1 &amp; 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>

按单个数据属性中的多个值过滤

Filter by multiple values in a single data attribute

jquery

custom-data-attribute