使用 jquery 的多个复选框过滤器

Question

我正在使用 jquery 输入复选框过滤器。在搜索参考资料时，我从“StackOverflow”中获得了以下代码，该代码运行良好。但我的问题是如何将此代码与逻辑和操作一起使用。即，如果我选中了两个复选框，它只显示具有两个值的内容，而不是任何一个或

$(document).ready(function () {
$('.post').show();

$('.menu-item').find('input:checkbox').on('click', function () {
    var post = $('.post').hide();

    var elements = $('.menu-item').find('input:checked');

    if(elements.length){
        elements.each(function () {
            post.filter('.' + this.id).show();
        });
    }
    else
        post.show();
  });
}); 

http://jsfiddle.net/mzvNL/1/

Answer 1

您可以使用Array.every:

演示：

$(document).ready(function() {
  $('.post').show();

  $('.menu-item').find('input:checkbox').on('click', function() {
    var $posts = $('.post').hide();
    var $elements = $('.menu-item').find('input:checked');

    $posts
      .filter(function() {
        var $post = $(this);
        return $elements.toArray().every(function(element) {
          return $post.hasClass($(element).attr('id'));
        });
      })
      .show();
  });
});

article {
  height: 100px;
  width: 100px;
  background: red;
  margin: 10px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="menu-item">
    <input id="beans-palak" type="checkbox" />
    <label for="beans-palak">Beans Palak</label>
    
    <input id="bengal-lentils" type="checkbox" />
    <label for="bengal-lentils">Bengal Lentils</label>
    
    <input id="bombay-potatoes" type="checkbox" />
    <label for="bombay-potatoes">Bombay-Potatoes</label>
  </li>
</ul>

<article class="post beans-palak">palak</article>
<article class="post bombay-potatoes">potatoes</article>
<article class="post bengal-lentils">lentils</article>
<article class="post bombay-potatoes bengal-lentils">potatoes lentils</article>
<article class="post bengal-lentils bombay-potatoes bengal-lentils">all</article>