Фильтрация по нескольким значениям в одном атрибуте данных

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 здесь .

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>