使用 jquery 的高级多复选框过滤器

Question

我想使用复选框过滤我的内容，我从“StackOverflow”获得了一些参考。以下是代码

$(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">
    <h4>Profession</h4>
    
        <label for="doctor">Doctor</label>
        <input id="doctor" type="checkbox" />
        <label for="engineer">Engineer</label>
        <input id="engineer" type="checkbox" />
        <label for="pilot">Pilot</label>
        <input id="pilot" type="checkbox" />
    </li>
    <li class="menu-item">
    <h4>City</h4>
    
        <label for="kochi">Kochi</label>
        <input id="kochi" type="checkbox" />
        <label for="trivandrum">Trivandrum</label>
        <input id="trivandrum" type="checkbox" />
        <label for="kannur">Kannur</label>
        <input id="kannur" type="checkbox" />
    </li>
</ul>
 <article class="post doctor kochi">doctor-kochi</article>
    <article class="post engineer kannur">Engineer-kannur</article>
    <article class="post pilot trivandrum">pilot-trivandrum</article>
    <article class="post doctor kannur">doctor-kannur</article>
    <article class="post enginner kochi">Engineer-kochi</article>

https://jsfiddle.net/kichupreeji/rcyt19g8/12/

但是我的问题是，当我从复选框中选中医生时，它会显示所有医生值，当我选择 Kannur 和医生时，它会从 Kannur 中选择医生，但是当我选择 Kochi、Kannur 和医生时，它什么也不显示。我想要的是当我选择时，我需要显示来自 Kannur 和 Kochi 的医生。我知道可以通过结合array.every 和array.some 来完成，但我不知道这些功能。任何帮助都会很重要

Answer 1

我尝试使用filter，但两个条件不起作用，因为过滤和数组同时循环。

试试这个：

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

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

        if ($elements.length == 0)
        {
            $('.post').show(); return;
        }

        $posts.each(function () {
            var xPost = $(this);
            for (i = 0; i < $elements.length; i++) {
                if (xPost.hasClass($($elements[i]).attr('id'))) xPost.show();
            }
        });
    });
});

article {
    height: 30px;
    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">
        <h4>Profession</h4>

        <label for="doctor">Doctor</label><input id="doctor" type="checkbox" />

        <label for="engineer">Engineer</label><input id="engineer" type="checkbox" />

        <label for="pilot">Pilot</label><input id="pilot" type="checkbox" />
    </li>
    <li class="menu-item">
        <h4>City</h4>

        <label for="kochi">Kochi</label><input id="kochi" type="checkbox" />

        <label for="trivandrum">Trivandrum</label><input id="trivandrum" type="checkbox" />

        <label for="kannur">Kannur</label><input id="kannur" type="checkbox" />
    </li>
</ul>
<article class="post doctor kochi">doctor-kochi</article>
<article class="post engineer kannur">Engineer-kannur</article>
<article class="post pilot trivandrum">pilot-trivandrum</article>
<article class="post doctor kannur">doctor-kannur</article>
<article class="post enginner kochi">Engineer-kochi</article>