javascript - 按类型和颜色分类的Javascript筛选书籍

这是对我先前问的question的后续。我希望我的用户能够按类型和颜色过滤书籍。

我的意图还没有奏效。当用户从类型中选择“恐怖”并从封面颜色中选择“蓝色”时，我希望它显示蓝色中可用的所有恐怖书籍。相反，它只是一起显示所有的恐怖书籍（不论颜色）和所有蓝色的书籍（不论类型）。

<div class="books">
  <div class="filter">
    <ul class="genre">
      <li><a href="#" data-filter=".classic" href="#">Classic</a></li>
      ...
    </ul>

    <ul class="colour">
      <li><a href="#" class="grey" data-filter=".grey" href="#">Grey</a></li>
      ...
    </ul>
  </div>

  <ul class="library">
    <li class="book horror red">Horror<br>in Red</li>
    ...
    </ul>
</div>

我使用了一些Javascript，因此，当用户从过滤器列表中选择一种类型或颜色时，它将向该类型或颜色之外的所有书籍添加.hidden类。

if($('.books').length){
  var books = $('.books');
  books.find('.filter ul a').on('click', function(e){
    e.preventDefault();
    $(this).toggleClass('active');
    books.find('.book').addClass('hidden');

    books.find('.filter ul a.active').each(
        function(){
            var selector = $(this).attr('data-filter');
            books.find(selector).removeClass('hidden');
        }
    );
  });
}

我在这里有一个实际的演示工作：http://codepen.io/realph/pen/atImc

我相信我必须以某种方式更改JS，以便它显示所有“蓝色恐怖”书籍，而不是所有“蓝色”书籍和所有“恐怖”书籍。任何人都可以帮助解释如何执行此操作吗？将不胜感激。

提前致谢！

最佳答案

尝试这个

演示：http://codepen.io/anon/pen/HIeGx

jQuery(document).ready(function($) {
  if($('.books').length){
    var books = $('.books');
    books.find('.filter ul a').on('click', function(e){
      e.preventDefault();
      $(this).toggleClass('active');
      books.find('.book').addClass('hidden');
      var selectors = ""; // Declaration
      books.find('.filter ul a.active').each(
          function(){
              var selector = $(this).attr('data-filter');
            selectors += selector; // Collecting
          }
      );
      books.find(selectors).removeClass('hidden'); //Assign
    });
  }
});

收集所有选择器并在hidden语句后删除类each

更新

 if(books.find('.filter ul a.active').length < 1) {
        books.find('.book').removeClass('hidden');

在此行之后添加

books.find(selectors).removeClass('hidden'); //Assign

完整代码：

jQuery(document).ready(function($) {
  if($('.books').length){
    var books = $('.books');
    books.find('.filter ul a').on('click', function(e){
      e.preventDefault();
      $(this).toggleClass('active');
      books.find('.book').addClass('hidden');
      var selectors = ""; // Declaration
      books.find('.filter ul a.active').each(
          function(){
              var selector = $(this).attr('data-filter');
            selectors += selector; // Collecting
          }
      );
      books.find(selectors).removeClass('hidden'); //Assign
      if(books.find('.filter ul a.active').length < 1) {
        books.find('.book').removeClass('hidden');
    });
  }
});