Как фильтровать продукт в нескольких категориях?

Question

Целью является то, что у меня есть некоторые продукты, и каждый продукт находится под несколькими категориями. Первоначально я перечисляю весь продукт, и мне нужно фильтровать jQuery. Я пробовал следующий метод, но, похоже, он не работает. может ли кто-нибудь сказать мне, как я могу это достичь?

<section class="container"> 
    <ul class="filters"> 
     <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,usb-30"}]}'>HD TV</a></li> 
     <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,android-tv"}]}'>FULL-HD</a></li> 
     <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "android-tv,usb-30"}]}'>USB 3.0</a></li> 
     <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,full-hd"}]}'>Android</a></li> 
    </ul> 

    <div id="products"> 
     <div class="items" data-filter='hdtv,usb-30'> 
      <h2>I am HDTV haing usb 3.0</h2> 
     </div> 

     <div class="items" data-filter='hdtv,android-tv'> 
      <h2>I am HDTV but a android tv</h2> 
     </div> 

     <div class="items" data-filter='android-tv,usb-30'> 
      <h2>I am android tv</h2> 
     </div> 

     <div class="items" data-filter='hdtv,full-hd'> 
      <h2>I am a HDTV and full HD tv</h2> 
     </div> 
    </div> 

</section> 

Это мой JQuery

$(document).ready(function(){ 
    $(".nav-filter").click(function(e){ 
     e.preventDefault(); 
     $(".items").hide(); 
     _ = $(this); 
     filteritem = _.data("filters");   
     if(_.attr("data-status")=="active"){ 
      _.attr("data-status",""); 
      _.removeClass("active"); 
     }else{ 
      _.attr("data-status","active") 
      _.addClass("active"); 
     } 
     count = 0; 
     $(".filters").find("li").each(function() { 
       elem = $(this).find("[data-status='active']"); 
       item_show = elem.data("filters");  
       item = item_show.filterObject[0].items.split(","); 
       debugger; 
       if(typeof item_show === "undefined"){ count++; }        
       if(count == $(".filters").find("li").length){ $(".items").show(); }    
       else{     
        $("#products").find("div").each(function(){ 
          in_Array = $(this).data("filter").split(","); 
          if((item[0]==in_Array[0] || item[1]==in_Array[1]) || (item[0]==in_Array[1] || item[1]==in_Array[0])){ 
           //$(this).show(); 
          }       
        }); 
       } 
     }); 
    }); 
}); 

Answer 1

Вы можете реализовать логику фильтра, как

var $items = $('#products .items').each(function() { 
 
    var values = $(this).data('filter').split(/\s*,\s*/); 
 
    $(this).data('array-filters', values); 
 
}); 
 
$('.filters li:has([data-filters])').click(function() { 
 
    var filters = $(this).data('array-filters'); 
 

 
    var $selected = $items.filter(function() { 
 
    var values = $(this).data('array-filters'); 
 
    return values.some(function(value) { 
 
     return filters.indexOf(value) > -1; 
 
    }); 
 
    }); 
 

 
    $selected.show(); 
 
    $items.not($selected).hide(); 
 

 
    return false; 
 
}).each(function() { 
 
    var filters = $(this).find('a').data('filters').filterObject[0].items; 
 
    filters = filters.split(/\s*,\s*/); 
 
    $(this).data('array-filters', filters); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="container"> 
 
    <ul class="filters"> 
 
    <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,usb-30"}]}'>HD TV</a> 
 
    </li> 
 
    <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,android-tv"}]}'>FULL-HD</a> 
 
    </li> 
 
    <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "android-tv,usb-30"}]}'>USB 3.0</a> 
 
    </li> 
 
    <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,full-hd"}]}'>Android</a> 
 
    </li> 
 
    </ul> 
 

 
    <div id="products"> 
 
    <div class="items" data-filter='hdtv,usb-30'> 
 
     <h2>I am HDTV haing usb 3.0</h2> 
 
    </div> 
 

 
    <div class="items" data-filter='hdtv,android-tv'> 
 
     <h2>I am HDTV but a android tv</h2> 
 
    </div> 
 

 
    <div class="items" data-filter='android-tv,usb-30'> 
 
     <h2>I am android tv</h2> 
 
    </div> 
 

 
    <div class="items" data-filter='hdtv,full-hd'> 
 
     <h2>I am a HDTV and full HD tv</h2> 
 
    </div> 
 
    </div> 
 

 
</section>

Answer 2

Можете ли вы попробовать следующее

$(document).ready(function() { 
    $(".nav-filter").click(function (e) { 
     e.preventDefault(); 
     $(".items").hide(); 
     _ = $(this); 
     var filteritem = _.data("filters"); 
     var item = filteritem.filterObject[0].items.split(','); 
     $("#products").find("div").each(function() { 

      for (var i = 0; i < item.length; i++) { 
       if ($(this).data("filter").indexOf(item[i]) >= 0) { 
        $(this).show(); 

       } 
      } 

     }); 

    }); 

}); 

Fiddler