Javascript按类型筛选书籍

所以，我有一堆书，都附在一个或多个体裁上，我有一个过滤框（想想亚马逊），用户可以过滤他们喜欢的体裁的书

<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>

我在这里有一个工作演示：

问题是，我一次只能搜索一种类型（即幻想）。我无法选择两种类型（即幻想和惊悚片）。如果有人能帮我修改这段代码来做到这一点，我将非常感激

提前谢谢

更新：

在筛选器列表中添加了一个All筛选器（感谢@epascarello在这方面的帮助）：

---

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

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
      }
  );      
});

---

好的，寻找所有的活动元素，而不仅仅是被选中的元素并进行过滤。这太棒了！感谢您的解决方案，更重要的是，感谢您的宝贵意见。抱歉@epascarello，还有一个问题。设置“所有”过滤器的最佳方法是什么？每次按下该过滤器时都会将其重置回原来的位置？单击该选项即可：

$（'.filter ul a.active'）.removeClass（.active”）；图书。移除类（“隐藏”）我已经用“全部”过滤器更新了原始问题。它工作得很好，我只是想检查一下我做的每件事都是正确的？再次感谢。您没有删除隐藏，第一个onclick将应用于第二个onclick。
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');                             
    }); 
  }
});

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
      }
  );      
});