Javascript 按类型过滤书籍

Question

所以，我有一堆书籍，全部附加到一种或多种类型，并且我有一个过滤器框(想想亚马逊)，以便用户可以过滤他们喜欢的类型的书籍。

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

  <ul class="library">
    <li class="book classic">Classic</li>
    ...
  </ul>
</div>

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

if($('.books').length){
    var books = $('.books');
    books.find('.filter ul a').on('click', function(){
      books.find('.filter ul a').removeClass('active');
      $(this).addClass('active');
      var selector = $(this).attr('data-filter');
      books.find('.book').addClass('hidden');
      books.find(selector).removeClass('hidden');
      return false;
    });
}

我在这里有一个有效的演示:http://codepen.io/realph/pen/atImc

问题是，我一次只能搜索一种类型(即奇幻)。我无法选择两种类型(即奇幻和惊悚)。如果有人可以帮助我调整这段代码来做到这一点，我将非常感激。

提前致谢!

更新:

向过滤器列表中添加了“全部”过滤器(感谢@epascarello 对此的帮助):

jQuery(document).ready(function($) {
  if($('.books').length){
    var books = $('.books');

    books.find('.filter ul a').on('click', function(e){
      e.preventDefault(); 
      books.find('.filter ul a.all').removeClass('active');
      $(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');      
        }
      );        
    });

    books.find('.filter ul a.all').on('click', function(e){
      e.preventDefault();                                       
      books.find('.filter ul a').removeClass('active');
      books.find('.book').removeClass("hidden");  
      $(this).toggleClass('active');                             
    }); 
  }
});

Answer 1

这尚未经过测试，但类似的东西应该可以工作

var books = $('.books');
books.find('.filter ul a').on('click', function(e){
  e.preventDefault();                                  //Cancel the click action
  $(this).toggleClass('active');                       //toggle the active class
  books.find('.book').addClass('hidden');              //hide all of the books
  books.find('.filter ul a.active').each(              //find the selected filters and loop through
      function(){
          var selector = $(this).attr('data-filter');  //get the attribute 
          books.find(selector).removeClass('hidden');  //unhide the ones that match
      }
  );      
});