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和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>

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

1 个答案: