[英]Filtering Content using jQuery
I'm attempting to create a filterable photo gallery using jQuery and multiple classes. 我正在尝试使用jQuery和多个类创建可过滤的照片库。 I have some code set up, but it doesn't seem to work. 我已经设置了一些代码,但是似乎没有用。 Can anybody give me any insight on how to fix this function? 谁能给我任何有关如何解决此功能的见解?
$(document).ready(function(){
$('#sorter a').click(function(e){
var sortName = $(this).text().toLowerCase().replace(' ','-');
if(sortName === 'all-images'){
$('#photorow1 li').show().removeClass('hidden');
}
else {
$('#photorow1 li').filter(sortName).show().removeClass('hidden')
.end().not(sortName).hide().addClass('hidden');
}
e.preventDefault();
});
});
Any help would be greatly appreciated!! 任何帮助将不胜感激!!
*updated code *更新代码
The problem is you're doing a return false
before any work is being done, move that to the end of your click handler :) 问题是您在做任何工作之前都在做一个return false
,将其移到点击处理程序的末尾:)
Overall you can clean it up a bit, something like this should do: 总体来说,您可以对其进行清理,如下所示:
$(function(){
$('#sorter a').click(function(e){
var sortName = $(this).text().toLowerCase().replace(' ','-');
if(sortName === 'all-images') {
$('#photorow1 li').show();
} else {
$('#photorow1 li').filter(filterVal).show().removeClass('hidden')
.end().not(filterVal).hide().addClass('hidden');
}
e.preventDefault();
});
});
I recommend that you just add display: none;
我建议您只添加display: none;
to the .hidden
CSS rules (if you need that class for something else), otherwise just .hide()
/ .show()
works. 到.hidden
CSS规则(如果需要该类别的东西),否则只是.hide()
/ .show()
的作品。
For starters, return false;
对于初学者, return false;
否则, return false;
should be at the end of the function, because any code that comes after it in that function will be ignored. 应该在函数的末尾,因为该函数之后的所有代码都将被忽略。
Plus, you don't need that and e.preventDefault();
另外,您不需要使用e.preventDefault();
in the same function, they overlap a bit. 在相同的功能中,它们有点重叠。 You can read more about their similarities here . 您可以在此处阅读有关它们相似之处的更多信息。 Pick one. 选一个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.