Question

我试图建立一个基于Rory McCrossan评论示例的过滤系统：Multiple Filter using jquery with data attribute

问题在于它不允许在一个过滤器组内部使用多个过滤器。有什么建议吗？

截图图片：它应该如何工作

Screenshot image: How it should work

HTML

<ul>
  <li>
    <div class="sts">
      <h2>Year</h2>
      <div class="checkbox">
        <label>
          <input data-id="2015" data-type="year" class="stat year" type="checkbox" />2015
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="2016" data-type="year" class="stat year" type="checkbox" />2016
        </label>
      </div>
    </div>
  </li>
  <li>
    <h2>Person</h2>
    <div class="ats">
      <div class="checkbox">
        <label>
          <input data-id="mike" data-type="person" class="stat person" type="checkbox" />Mike
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="tim" data-type="person" class="stat person" type="checkbox" />Tim
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="anne" data-type="person" class="stat person" type="checkbox" />Anne
        </label>
      </div>
    </div>
  </li>
  <li>
    <h2>Project</h2>
    <div class="dpts">
      <div class="checkbox">
        <label>
          <input data-id="google" data-type="project" class="stat project" type="checkbox" />Google
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="yahoo" data-type="project" class="stat project" type="checkbox" />Yahoo
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="microsoft" data-type="project" class="stat project" type="checkbox" />Microsoft
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="facebook" data-type="project" class="stat project" type="checkbox" />Facebook
        </label>
      </div>
    </div>
  </li>
</ul>

<ul class="list">
  <li data-year="2015" data-person="mike" data-project="google">Mike's Google project from 2015</li>
  <li data-year="2016" data-person="mike" data-project="google">Mike's Google project from 2016</li>
  <li data-year="2016" data-person="mike" data-project="facebook">Mike's Facebook project from 2016</li>
  <li data-year="2015" data-person="anne" data-project="microsoft">Anne's Google project from 2016</li>
  <li data-year="2015" data-person="tim" data-project="yahoo">Tim's Yahoo project from 2015</li>
  <li data-year="2016" data-person="tim" data-project="facebook">Tim's Facebook project from 2016</li>
  <li data-year="2015" data-person="tim" data-project="google">Tim's Facebook project from 2016</li>
  <li data-year="2016" data-person="anne" data-project="yahoo">Anne's Yahoo project from 2016</li>
</ul>

JS

$('.stat').on('click', function() {
  var $stats = $('.stat:checked');
  var $items = $('.list li');

  $items.show();
  if ($stats.length == 0)
    return;

  $stats.each(function() {
    var $stat = $(this);
    $items.filter(function() {
      return $(this).data($stat.data('type')) != $stat.data('id');
    }).hide();
  })
});

Answer 1

查找下面的解决方案，仅限js中的小变化。

＆＃13;

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

＆＃13;

ul {
  list-style:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>Select:</b><br>
2015 and 2016, Tim, Yahoo and Facebook<br><br>
<b>It's should show only these rows:</b><br>
Tim's Yahoo project from 2015<br>
Tim's Facebook project from 2016<br><br>
<hr>
<ul>
  <li>
    <div class="sts">
      <h2>Year</h2>
      <div class="checkbox">
        <label>
          <input data-id="2015" data-type="year" class="stat year" type="checkbox" />2015
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="2016" data-type="year" class="stat year" type="checkbox" />2016
        </label>
      </div>
    </div>
  </li>
  <li>
    <h2>Person</h2>
    <div class="ats">
      <div class="checkbox">
        <label>
          <input data-id="mike" data-type="person" class="stat person" type="checkbox" />Mike
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="tim" data-type="person" class="stat person" type="checkbox" />Tim
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="anne" data-type="person" class="stat person" type="checkbox" />Anne
        </label>
      </div>
    </div>
  </li>
  <li>
    <h2>Project</h2>
    <div class="dpts">
      <div class="checkbox">
        <label>
          <input data-id="google" data-type="project" class="stat project" type="checkbox" />Google
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="yahoo" data-type="project" class="stat project" type="checkbox" />Yahoo
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="microsoft" data-type="project" class="stat project" type="checkbox" />Microsoft
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="facebook" data-type="project" class="stat project" type="checkbox" />Facebook
        </label>
      </div>
    </div>
  </li>
</ul>

<ul class="list">
  <li data-year="2015" data-person="mike" data-project="google">Mike's Google project from 2015</li>
  <li data-year="2016" data-person="mike" data-project="google">Mike's Google project from 2016</li>
  <li data-year="2016" data-person="mike" data-project="facebook">Mike's Facebook project from 2016</li>
  <li data-year="2015" data-person="anne" data-project="microsoft">Anne's Google project from 2016</li>
  <li data-year="2015" data-person="tim" data-project="yahoo">Tim's Yahoo project from 2015</li>
  <li data-year="2016" data-person="tim" data-project="facebook">Tim's Facebook project from 2016</li>
  <li data-year="2015" data-person="tim" data-project="google">Tim's Facebook project from 2016</li>
  <li data-year="2016" data-person="anne" data-project="yahoo">Anne's Yahoo project from 2016</li>
</ul>

＆＃13;

Answer 2

这是我的jQuery / js

$('.stat').on('click', function() {
    var $stats = $('.stat:checked');
    var $items = $('.list li');

    $items.show();
    if ($stats.length == 0)
        return;

    var $vstats = $.map($stats, function(o) {return $(o).data('id'); });

    $stats.each(function() {
        var $stat = $(this);
        $items.filter(function() {
            return $vstats.indexOf($(this).data($stat.data('type'))) < 0;
        }).hide();
    })
});

整个jsfiddle

jQuery多个过滤器组

2 个答案: