Javascript按类型筛选书籍 [英] Javascript Filter Books by Genre

问题描述

所以，我收藏了大量的书籍，都附有一个或多个流派，并且我有一个过滤器（亚马逊），所以用户可以按照他们偏好的流派筛选书籍。

 < div class =books> 
< div class =filter> 
< ul> 
< li>< a class =data-filter =。classichref =＃> Classic< / a>< / li> 
 ... 
< / ul> 
< / div> 
 
< ul class =library> 
< li class =book classic> Classic< / li> 
 ... 
< / ul> 
< / div> 
  

然后我使用了一些Javascript，所以当用户从过滤列表中选择一个流派时，它为 .hidden 添加了一类。 > if（$（'。books'）。length）{
var books = $（'。books'）; $'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$' b $ b $（this）.addClass（'active'）;
var selector = $（this）.attr（'data-filter'）;
books.find（'。book'）。 addClass（'hidden'）;
books.find（selector）.removeClass（'hidden'）;
return false;
}）;



$ b

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

$ b $麻烦的是，我一次只能搜索一个类型（即幻想）。我无法选择两种类型（即幻想和惊悚）。如果有人可以帮助我适应这个代码做到这一点，我真的很感激。

在此先感谢！

在过滤器列表中添加了一个全部过滤器（感谢@epascarello的帮助）： / b>

  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'）; 
} （'。click'，function（e）{
）; 
}）; 
 
 books.find（'。filter ul a.all'）。 e.preventDefault（）; 
 books.find（'。filter ul a'）。removeClass（'active'）; 
 books.find（'。book'）。removeClass（hidden）; 
 $（this）.toggleClass（'active'）; 
}）; 
} 
}）; 
  

解决方案

这是未经测试的， / p>

  var books = $（'。books'）; $（'。filter ul a'）。on（'click'，function（e）{
 e.preventDefault（）; //取消点击操作
 $（this ）.toggleClass（'active'）; //切换活动类
 books.find（'。book'）。addClass（'hidden'）; //隐藏所有的书
 books.find （'.filter ul a.active'）。each（//找到所选的过滤器并循环
函数（）{
 var selector = $（this）.attr（'data-filter'） ; //获取属性
 books.find（selector）.removeClass（'hidden'）; //取消隐藏匹配
} 
）; 
}）; 
  

So, I've got a bunch of books, all attached to one or more genres and I've got a filter box (think Amazon) so users can filter through books in their preferred genre.

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

I'm then using a bit of Javascript, so when users select a genre from the filter list, it adds a class of .hidden to all books outside that genre.

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

I've got a working demo of this in action here: http://codepen.io/realph/pen/atImc

Trouble is, I can only search one genre at a time (i.e. Fantasy). I'm not able to select two genres (i.e. Fantasy and Thriller). If anyone could help me to adapt this code to do just that, I'd really appreciate it.

Thanks in advance!

UPDATE:

Added an All filter to the filter list (thanks to @epascarello for his help on this):

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

解决方案

This is untested, but something like this should work

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按类型筛选书籍的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！