Filtering Content using jQuery

Question

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();
 });
});

Any help would be greatly appreciated!!

*updated code

Answer 1

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.

Answer 2

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.