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

麻烦的是，我一次只能搜索一种类型（即幻想）。我无法选择两种类型（即Fantasy和Thriller）。如果有人能帮助我修改这个代码来做到这一点，我真的很感激。

提前致谢！

更新

在过滤器列表中添加了一个All过滤器（感谢@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
      }
  );      
});

Javascript根据类型过滤书籍

1 个答案: