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,所以当用户从过滤列表中选择一个流派时,它为 我在这里有一个工作演示: http://codepen.io/realph/pen/atImc .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
$ 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屋!