开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜