Улучшение алгоритма фильтра

Question

Когда я выбираю 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>

Answer 1

Вы должны составить строку селектора следующим образом:

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