Фильтрация содержимого с использованием jQuery

Question

Я пытаюсь создать фильтруемую фотогалерею, используя jQuery и несколько классов. У меня есть определенный код, но он не работает. Может ли кто-нибудь дать мне понять, как исправить эту функцию?

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

Любая помощь была бы принята с благодарностью!

* обновленный код

Answer 1

Проблема вы делаете return false прежде, чем любая работа делается, двигаться, что к концу обработчика щелчка :)

В целом вы можете очистить его немного , что-то вроде этого нужно сделать:

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

Я рекомендую вам просто добавить display: none; правилам .hidden CSS (если вам нужен этот класс для чего-то еще), в противном случае просто .hide()/.show() работы.

Answer 2

Для начала return false; должен быть в конце функции, потому что любой код, который появляется после этого в этой функции, будет игнорироваться.

Плюс, вам это не нужно, и e.preventDefault(); в той же функции, они немного перекрываются. Вы можете больше узнать об их сходствах here. Выбери один.