jQueryの複数のフィルタグループ

Question

は、ここでの例を次のようにコメントしMultiple Filter using jquery with data attribute

問題は、それが一つのフィルタグループ内の複数のフィルタを許可しないということです。助言がありますか？

See Fiddle here »

スクリーンショットの画像：それがどのように動作するかを

HTML

<ul> 
    <li> 
    <div class="sts"> 
     <h2>Year</h2> 
     <div class="checkbox"> 
     <label> 
      <input data-id="2015" data-type="year" class="stat year" type="checkbox" />2015 
     </label> 
     </div> 
     <div class="checkbox"> 
     <label> 
      <input data-id="2016" data-type="year" class="stat year" type="checkbox" />2016 
     </label> 
     </div> 
    </div> 
    </li> 
    <li> 
    <h2>Person</h2> 
    <div class="ats"> 
     <div class="checkbox"> 
     <label> 
      <input data-id="mike" data-type="person" class="stat person" type="checkbox" />Mike 
     </label> 
     </div> 
     <div class="checkbox"> 
     <label> 
      <input data-id="tim" data-type="person" class="stat person" type="checkbox" />Tim 
     </label> 
     </div> 
     <div class="checkbox"> 
     <label> 
      <input data-id="anne" data-type="person" class="stat person" type="checkbox" />Anne 
     </label> 
     </div> 
    </div> 
    </li> 
    <li> 
    <h2>Project</h2> 
    <div class="dpts"> 
     <div class="checkbox"> 
     <label> 
      <input data-id="google" data-type="project" class="stat project" type="checkbox" />Google 
     </label> 
     </div> 
     <div class="checkbox"> 
     <label> 
      <input data-id="yahoo" data-type="project" class="stat project" type="checkbox" />Yahoo 
     </label> 
     </div> 
     <div class="checkbox"> 
     <label> 
      <input data-id="microsoft" data-type="project" class="stat project" type="checkbox" />Microsoft 
     </label> 
     </div> 
     <div class="checkbox"> 
     <label> 
      <input data-id="facebook" data-type="project" class="stat project" type="checkbox" />Facebook 
     </label> 
     </div> 
    </div> 
    </li> 
</ul> 

<ul class="list"> 
    <li data-year="2015" data-person="mike" data-project="google">Mike's Google project from 2015</li> 
    <li data-year="2016" data-person="mike" data-project="google">Mike's Google project from 2016</li> 
    <li data-year="2016" data-person="mike" data-project="facebook">Mike's Facebook project from 2016</li> 
    <li data-year="2015" data-person="anne" data-project="microsoft">Anne's Google project from 2016</li> 
    <li data-year="2015" data-person="tim" data-project="yahoo">Tim's Yahoo project from 2015</li> 
    <li data-year="2016" data-person="tim" data-project="facebook">Tim's Facebook project from 2016</li> 
    <li data-year="2015" data-person="tim" data-project="google">Tim's Facebook project from 2016</li> 
    <li data-year="2016" data-person="anne" data-project="yahoo">Anne's Yahoo project from 2016</li> 
</ul> 

JS

$('.stat').on('click', function() { 
    var $stats = $('.stat:checked'); 
    var $items = $('.list li'); 

    $items.show(); 
    if ($stats.length == 0) 
    return; 

    $stats.each(function() { 
    var $stat = $(this); 
    $items.filter(function() { 
     return $(this).data($stat.data('type')) != $stat.data('id'); 
    }).hide(); 
    }) 
}); 

Answer 1

ここに私のjQuery/JS

$('.stat').on('click', function() { 
    var $stats = $('.stat:checked'); 
    var $items = $('.list li'); 

    $items.show(); 
    if ($stats.length == 0) 
     return; 

    var $vstats = $.map($stats, function(o) {return $(o).data('id'); }); 

    $stats.each(function() { 
     var $stat = $(this); 
     $items.filter(function() { 
      return $vstats.indexOf($(this).data($stat.data('type'))) < 0; 
     }).hide(); 
    }) 
}); 

全体jsfiddle

Answer 2

以下の解決策を見つけるには、jsの小さな変更のみが必要です。

$('.stat').on('change', function() { 
 
    var $stats = $('.stat:checked'); 
 
    var $items = $('.list li'); 
 

 
    $items.show(); 
 
    if ($stats.length == 0) 
 
    return; 
 

 
    $stats.each(function() { 
 
    
 
    var $stat = $(this); 
 
    $items.hide().filter(function() { 
 
     return $(this).data($stat.data('type')) == $stat.data('id'); 
 
    }).show(); 
 
    }) 
 
});

ul { 
 
    list-style:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<b>Select:</b><br> 
 
2015 and 2016, Tim, Yahoo and Facebook<br><br> 
 
<b>It's should show only these rows:</b><br> 
 
Tim's Yahoo project from 2015<br> 
 
Tim's Facebook project from 2016<br><br> 
 
<hr> 
 
<ul> 
 
    <li> 
 
    <div class="sts"> 
 
     <h2>Year</h2> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="2015" data-type="year" class="stat year" type="checkbox" />2015 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="2016" data-type="year" class="stat year" type="checkbox" />2016 
 
     </label> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <h2>Person</h2> 
 
    <div class="ats"> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="mike" data-type="person" class="stat person" type="checkbox" />Mike 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="tim" data-type="person" class="stat person" type="checkbox" />Tim 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="anne" data-type="person" class="stat person" type="checkbox" />Anne 
 
     </label> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <h2>Project</h2> 
 
    <div class="dpts"> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="google" data-type="project" class="stat project" type="checkbox" />Google 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="yahoo" data-type="project" class="stat project" type="checkbox" />Yahoo 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="microsoft" data-type="project" class="stat project" type="checkbox" />Microsoft 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="facebook" data-type="project" class="stat project" type="checkbox" />Facebook 
 
     </label> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 
<ul class="list"> 
 
    <li data-year="2015" data-person="mike" data-project="google">Mike's Google project from 2015</li> 
 
    <li data-year="2016" data-person="mike" data-project="google">Mike's Google project from 2016</li> 
 
    <li data-year="2016" data-person="mike" data-project="facebook">Mike's Facebook project from 2016</li> 
 
    <li data-year="2015" data-person="anne" data-project="microsoft">Anne's Google project from 2016</li> 
 
    <li data-year="2015" data-person="tim" data-project="yahoo">Tim's Yahoo project from 2015</li> 
 
    <li data-year="2016" data-person="tim" data-project="facebook">Tim's Facebook project from 2016</li> 
 
    <li data-year="2015" data-person="tim" data-project="google">Tim's Facebook project from 2016</li> 
 
    <li data-year="2016" data-person="anne" data-project="yahoo">Anne's Yahoo project from 2016</li> 
 
</ul>