时间戳

首页 > 解决方案 > 过滤算法改进

jquery - 过滤算法改进

问题描述

当我选择category="books"和partner="amazon" 时， Product 4 显示良好，但如何隐藏Product 1？

请帮助我，使其能够正常工作。

 <script>
    $('.filter').click(function() {
      $('.product').hide();
      $('.filter:checked').each(function() {
      var filter = $(this).attr('filter');
      var data   = $(this).attr('data').split(', ');
      $.each(data, function(index,value) {
      $('.product['+filter+'="'+value+'"]').show();
      });
      });
      });
    </script>




 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p>Category</p>
    <div><input class="filter" filter="category" data="boeken" type="checkbox" />books</div> 
    <div><input class="filter" filter="category" data="spellen" type="checkbox" />games</div>
    <div><input class="filter" filter="category" data="andere" type="checkbox" />other</div>

    <p>Partners</p>
    <div><input class="filter" filter="partner" data="amazon" type="checkbox" />amazon</div>
    <div><input class="filter" filter="partner" data="ebay" type="checkbox" />ebay</div>
    <div><input class="filter" filter="partner" data="amazon, ebay" type="checkbox" />amazon and ebay</div>
   <br>
    <div class="products">
  <div class="product" category="boeken"  partner="amazon" />Product 1</div>
  <div class="product" category="spellen" partner="ebay" />Product 2</div>
  <div class="product" category="andere"  partner="ebay" />Product 3</div>
  <div class="product" category="andere"  partner="amazon" />Product 4</div>
</div>

标签： jqueryjquery-ui

解决方案

您应该像这样编写选择器字符串：

$('.filter').click(function() {
    $('.product').hide();
    $('.filter:checked').each(function() {
        var filter = $(this).attr('filter');
        var data   = $(this).attr('data').split(', ');
        var selector = '.product';
        $.each(data, function(index,value) {
            selector += '['+filter+'="'+value+'"]';
        });
        $(selector).show();
    });
});

推荐阅读