用'OR'而不是'AND'來過濾JS

我在使用我的jQuery過濾器覆蓋對方時遇到問題。例如，如果我想查看男士和女士，則男士會匹配項目＃1並將其設置爲顯示，但將其設置爲隱藏，因爲女士不在$.inArray(filter.value, item.data("attributes")) == -1的數據屬性中。有沒有辦法比較2個數組（一個是選擇的過濾器，另一個是item.data（「屬性」）），並顯示具有一個或多個匹配的不同項目。（即我想男子和婦女時尚藍色或紅色）用'OR'而不是'AND'來過濾JS

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

感謝，讓我知道，如果你有任何想法！

來源

2017-04-18 Wally Kolcz

不能看到你的HTML，但如果你只是刪除其他隱藏聲明它的工作？ 'else $（'＃'+ $（item）.attr（「id」））。hide（）;' – andi

您的'$（filters）.each（'看起來不正確......您已經有'filters'定義爲jQuery對象，那麼爲什麼你再次將它傳遞給$（）？ – jas7457

@ jas7457 - 你是對的，我刪除了圍繞過濾器變量的$（） –

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();

來源

2017-04-18 21:15:43

沒有您的HTML測試，我把這裏作爲猜測。我在這裏做的是翻轉邏輯。

首先，它顯示了所有的行。然後它遍歷每一行，獲得適用的屬性。對於這些屬性中的每一個，它都會搜索匹配的選中過濾器。如果至少有一個匹配，它會保持該行可見。否則，它隱藏它。你可以在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>

來源

2017-04-18 21:46:42

用'OR'而不是'AND'來過濾JS

回答

相關問題