'OR'ではなく 'AND'でJSをフィルタリングします

Question

私のjQueryフィルタが互いにオーバーライドするのに問題があります。たとえば、メンズとレディースを見たい場合、メンズはアイテム＃1に一致し、表示するように設定しますが、女性は$.inArray(filter.value, item.data("attributes")) == -1のデータ属性にないため、非表示に設定します。 2つの配列を比較する方法があります（1つは選択されたフィルタであり、もう1つはitem.data（ "属性"）です）、1つ以上の一致を持つ別個の項目を表示します。

ここ

$('.filter').on('click', function() { 
     filters = $('.filter:checked'); 
     if (filters.length == 0) 
      $('.list-o-glasses').show(); 
     else { 
      $('.list-o-glasses').hide(); 
      $('.list-o-glasses').each(function(index, val) { 
       var item = $(this); 
       var show = true; 
       $(filters).each(function(i, filter) { 
        if ($.inArray(filter.value, item.data("attributes")) == -1) { 
         show = false; 
        } 
       }); 

       if (show) 
        $('#' + $(item).attr("id")).show(); 
       else 
        $('#' + $(item).attr("id")).hide(); 
      }); 
     } 
    });\ 

がレンダリングされたHTMLである（すなわち、私は青や赤の色でメンズとレディースファッションをしたい）：

<div class="row shop-grid grid-view"> 
<div class="col-lg-4 col-md-6 list-o-glasses" id="BSG034BN" data-attributes="[&quot;men&quot;,&quot;wayfarer&quot;,&quot;metal&quot;,&quot;145&quot;,&quot;135&quot;,&quot;brown&quot;,&quot;brown&quot;]" style="display: block;"> 
</div> 
</div> 

おかげで、あなたが任意のアイデアを持っているなら、私に知らせて！

Answer 1

var show = false; 
$(filters).each(function(i, filter) { 
    if ($.inArray(filter.value, item.data("attributes")) <> -1) { 
    show = true; 
    return false; //matched a filter, break the loop 
    } 
}); 

if (show) 
    $('#' + $(item).attr("id")).show(); 

Answer 2

テストするHTMLがない場合は、ここで推測します。私がここでやったことは論理を反転させることです。

まず、すべての行を表示します。次に、各行を通過し、適用可能な属性を取得します。これらの属性ごとに、一致するチェック済みフィルターを検索します。少なくとも1つが一致すると、行が表示されたままになります。そうでなければ、それを隠す。 jQueryのサイトでsome at MDNとtoggleとisについて詳しく知ることができます。

$(function() { 
 
    $('.filter').on('click', function() { 
 
    var filters = $('.filter:checked'); 
 
    $('.list-of-glasses').show(); 
 
    $('.list-of-glasses').each(function() { 
 
     var item = $(this); 
 
     var attrs = item.data("attributes"); 
 
     var show = attrs.some(function(attr) { 
 
     return filters.is('input[value="' + attr + '"]'); 
 
     }); 
 
     item.toggle(show); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li><label>Men's<input type="checkbox" checked value="mens" class="filter"></label></li> 
 
<li><label>Women's<input type="checkbox" checked value="womens" class="filter"></label></li> 
 
<div class="list-of-glasses" data-attributes="[&quot;mens&quot;]">Men's</div> 
 
<div class="list-of-glasses" data-attributes="[&quot;mens&quot;,&quot;womens&quot;]">Unisex</div> 
 
<div class="list-of-glasses" data-attributes="[&quot;womens&quot;]">Women's</div>