Filtering Content using jQuery
I'm attempting to create a filterable photo gallery using jQuery and multiple classes. 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();
});
});
开发者_如何学JAVA
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 :)
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;
to the .hidden
CSS rules (if you need that class for something else), otherwise just .hide()
/.show()
works.
For starters, 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();
in the same function, they overlap a bit. You can read more about their similarities here. Pick one.
精彩评论