Question

我有一个脚本，该脚本将按元素的数据属性值过滤元素。但是我想扩展它，以便每个元素在其data属性中可以包含多个值，例如：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()方法仅选择在您存储在.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>

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

1 个答案: