Filtrage de contenu à l'aide de jQuery

Question

Je tente de créer une galerie de photos filtrable à l'aide de jQuery et de plusieurs classes. J'ai du code mis en place, mais cela ne semble pas fonctionner. Quelqu'un peut-il me donner un aperçu sur la façon de réparer cette fonction?

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

Toute aide serait grandement appréciée !!

* code mis à jour

Answer 1

Le problème que vous est faites un return false avant que le travail est fait, que déplacer jusqu'à la fin de votre gestionnaire de clic :)

Dans l'ensemble, vous pouvez nettoyer un peu , quelque chose comme cela devrait faire:

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

Je vous recommande d'ajouter juste display: none; aux .hidden règles CSS (si vous avez besoin de cette classe pour quelque chose d'autre), sinon juste .hide()/.show() œuvres.

Answer 2

Pour les démarreurs, return false; devrait être à la fin de la fonction, car tout code qui le suivra dans cette fonction sera ignoré.

De plus, vous n'avez pas besoin de cela et e.preventDefault(); dans la même fonction, ils se chevauchent un peu. Vous pouvez en savoir plus sur leurs similitudes here. Choisissez-en un.