Question

我正在使用jquery输入复选框过滤器。当我搜索参考文献时，我从“ StackOverflow”获得了以下代码，它们可以正常工作。但是我的问题是如何将此代码与逻辑和运算结合使用。即，如果我选中了两个复选框，它将仅显示具有两个值的内容，而不会显示一个或一个

Update Event = 84000000/(40000*4200) = 0.5

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>

带有jQuery的多个复选框过滤器

1 个答案: