Блог

Мне нужно фильтровать с помощью multiselct, атрибута данных. он работает, но не так, как ожидалось

вот мой код

 <ul>
  <li>
    <div class="sts">
      <h1>filter 1</h1>
      <div class="checkbox">
        <label>
          <input data-id="1" data-type="st" class="stat st" type="checkbox" />1
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="2" data-type="st" class="stat st" type="checkbox" />2
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="3" data-type="st" class="stat st" type="checkbox" />3
        </label>
      </div>
    </div>
  </li>
  <li>
    <h1>filter 2</h1>
    <div class="ats">
      <div class="checkbox">
        <label>
          <input data-id="foo" data-type="at" class="stat at" type="checkbox" />foo
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="boo" data-type="at" class="stat at" type="checkbox" />boo
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="bar" data-type="at" class="stat at" type="checkbox" />bar
        </label>
      </div>
    </div>
  </li>
  <li>
    <h1>filter 3</h1>
    <div class="dpts">
      <div class="checkbox">
        <label>
          <input data-id="a" data-type="dpt" class="stat dpt" type="checkbox" />a
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="b" data-type="dpt" class="stat dpt" type="checkbox" />b
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="c" data-type="dpt" class="stat dpt" type="checkbox" />c
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="d" data-type="dpt" class="stat dpt" type="checkbox" />d
        </label>
      </div>
    </div>
  </li>
</ul>

<ul class="list">
  <li data-at="foo" data-st="1" data-dpt="a">asdw</li>
  <li data-at="boo" data-st="2" data-dpt="c">qwedf</li>
  <li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
  <li data-at="bar" data-st="3" data-dpt="b">tazxsw</li>
  <li data-at="bar" data-st="1" data-dpt="b">zxcvb</li>
  <li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
  <li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
  <li data-at="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>
  

Вот мой скрипт

 <script>
$('.stat').on('click', function() {
  var $stats = $('.stat:checked');
  var $items = $('.list li');
  if ($stats.length == 0) {
    $items.show();
    return;
  }
  $items.hide();
  $stats.each(function() {
    var $stat = $(this);
    $items.filter(function() {
      return $(this).data($stat.data('type')) == $stat.data('id');
    }).show();
  })
});
</script>
  

Если я выбираю любой из каждого фильтра, он работает нормально, но когда я выбираю из того же фильтра, он должен выполнять логическое ИЛИ, но он выполняет логическое И.

Вот пример скрипача

Я борюсь с той же проблемой, что и durai. Я обновил скрипку, пожалуйста, сделайте выбор в соответствии с инструкциями в верхней части страницы, и вы увидите проблемный случай.

 <ul class="list">
<li data-at="foo" data-st="1" data-dpt="a">asdw</li>
<li data-at="boo" data-st="3" data-dpt="c">qwedf</li>
<li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
<li data-at="bar" data-st="3" data-dpt="a">this should be visible (when filters: 3 | bar | aamp;b)</li>
<li data-at="bar" data-st="2" data-dpt="b">zxcvb</li>
<li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
<li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
<li data-at="bar" data-st="3" data-dpt="b">this should be visible (when filters: 3 | bar | aamp;b)</li>