jquery的濾波器

Question

HTML

<ul> 
    <li data-filters={["red","green","blue"]}>x</li> 
    <li data-filters={["red","green","yellow"]}>x</li> 
    <li data-filters={["white","green","gray"]}>x</li> 
</ul> 

JQUERY

var searchIDs = []; // array used to filter 
     $(".filter_check input:checkbox:checked").map(function(){ 
      searchIDs.push($(this).val()); 
     }); 

我應該隱藏埃夫< LI>不具有值與選中複選框。如何在jQuery中做到這一點？

UPDATE

這工作，但只能選擇只有一個複選框。我需要選擇多個複選框

$('#container li').each(function(){ 
      if (!$(this).data('filters').includes(searchIDs)) { 
       $(this).hide(); 
      } else { 
       $(this).show(); 
      } 
     }) 

UPDATE

var searchIDs = []; 
    function togRow(searchIDs) { 
      $('#container_box_result li').each(function(){ 
       $(this).toggle(
        searchIDs.every(function (id) { 
         return $(this).data('filters').includes(id) 
        }, this) 
        ); 
      }) 
     } 

    $(document).on('change', '.filter_check input',function(event){ 
     event.preventDefault(); 
     searchIDs = []; 
     $(".filter_check input:checkbox:checked").map(function(){ 
      searchIDs.push($(this).val()); 
     }); 
     console.log(searchIDs); 

     togRow($(this).val().split(/\s*,\s*/)); 
    }); 

Answer 1

你可以使用every和toggle這樣的：

function search(searchIDs) { 
 
    $('#container li').each(function(){ 
 
     $(this).toggle(
 
      searchIDs.every(function (id) { 
 
       return $(this).data('filters').includes(id) 
 
      }, this) 
 
     ); 
 
    }) 
 
} 
 

 
$('input').on('input', function() { 
 
    search($(this).val().split(/\s*,\s*/)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Search: <input> 
 
<ul id="container"> 
 
    <li data-filters='["red","green","blue"]'>red, green, blue</li> 
 
    <li data-filters='["red","green","yellow"]'>red, green, yellow</li> 
 
    <li data-filters='["white","green","gray"]'>white, green, gray</li> 
 
</ul>

這假定searchIDs中的值必須全部包括在內才能使條目可見。如果您希望它的行爲足以滿足一個匹配條件，請在代碼中將every更改爲some。