ホーム>source

チェックボックスを使用してコンテンツをフィルタリングし、「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、およびdoctorを選択すると、何も表示されないことです。私が望むのは、それを選択したときに、カンヌールと高知の医師を表示する必要があることです。 array.every を組み合わせることでそれができることを知っていました  および array.some 、しかしこれらの機能については知りません。どんな助けでもかなりのだろう

あなたの答え
  • 解決した方法 # 1

    filter を使ってみた  ただし、フィルタリングと配列が同時にループするため、2つの条件は機能しませんでした。

    これを試して :

    $(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>
    
    

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ どういうわけかPHPでメソッドをチェーンできますか