Javascript按类型过滤书籍
所以，我有一堆书，都附在一个或多个类型上，我有一个过滤盒（想想亚马逊），所以用户可以过滤他们喜欢的类型的书籍。
- Classic
...
- Classic
...
我正在使用一些Javascript，所以当用户从filter列表中选择一个类型时，它会向该类型之外的所有书籍添加一个.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）。 我无法选择两种类型（即Fantasy和Thriller）。 如果有人可以帮我修改这段代码来做到这一点，我真的很感激。
提前致谢！
更新：
在筛选器列表中添加了一个Allfilter（感谢@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'); }); } });
这是未经测试的，但这样的事情应该有效
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 } ); });