所以,我有一堆书籍,全部附加到一种或多种类型,并且我有一个过滤器框(想想亚马逊),以便用户可以过滤他们喜欢的类型的书籍。
<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');
});
}
});
最佳答案
这尚未经过测试,但类似的东西应该可以工作
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 按类型过滤书籍,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21446357/