Javascript筛选器按类型和颜色分类的图书

Question

这是我之前问过的一个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，让它显示所有的“蓝色恐怖”书籍，而不是所有的“蓝色”书籍和所有“恐怖”书籍。有人能帮我解释一下怎么做吗？我会很感激的。

提前感谢！

Answer 1

尝尝这个

演示：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');
    });
  }
});