如何过滤一个产品属于多个类别？

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