sélecteurs jQuery, un sélecteur par généralisant l'ancre ID

Question

J'ai un code sur mon site qui affiche une liste d'articles sur un blog comme suit (il y aura plusieurs objets avec la même catégorie):

<ul class="article category1"> 
    <li> etc 
    <li> 
</ul> 
<ul class="article category2"> 
    <li> etc 
    <li> 
</ul> 
<ul class="article category3"> 
    <li> etc 
    <li> 
</ul> 

J'ai un code jQuery qui filtre la liste de sorte que vous obtenez seulement une catégorie affichée comme suit:

$("#showall").click(function() { 
    $("ul.article").show('fast'); 
}); 
$("#showcategory1").click(function() { 
    $("ul.article.category1").show('fast'); 
    $("ul.article").not("ul.category1").hide('fast'); 
}); 

Lorsque vous cliquez sur le lien correspondant, à savoir

<a id="showall">All</a> 
<a id="category1">Category 1</a> 

Actuellement, j'ai environ 9 catégories à traiter et donc 10 extraits de jQuery qui semble horriblement inefficace (est horriblement inefficace). Je n'ai aucune idée de la façon de généraliser le code pour qu'il prenne l'ID (ou peut-être la classe) de l'ancre et l'applique ensuite aux listes pertinentes. Toute aide s'il vous plaît?

Merci!

---

Answer 1

Vous pouvez commonalize le code en travaillant à partir d'une liste des catégories:

$("#showall").click(function() { 
    $("ul.article").show('fast'); 
}); 

var cats = "food cars books"; 
$.each(cats.split(" "), 
    function(cat) { 
     $("#show"+cat).click(function() { 
      $("ul.article."+cat).show('fast'); 
      $("ul.article").not("ul."+cat).hide('fast'); 
     }); 
    }); 

Cela ne change pas la comportement d'exécution, réduit simplement la quantité de code nécessaire pour créer les fonctions en premier lieu. L'idée clé ici est que les sélecteurs jQuery ne doivent pas être des chaînes littérales, ils peuvent être construits à partir de littéraux et de variables.

Answer 2

fonctions de gestionnaire d'événements sont passés d'un objet événement (et l'élément qui a déclenché l'événement est également transmis sous forme this). Vous pouvez l'utiliser pour obtenir l'identifiant, puis opérer à partir de là - si nécessaire en utilisant les fonctions de traversée de DOM dans la bibliothèque jQuery pour vous rendre à la bonne liste.

Answer 3

Essayez ceci (non testé, mais devrait vous donner une idée):

$("a[id^=category]").click(function() { 
    $("ul." + $(this).attr("id")).show("fast").siblings().hide("fast"); 
}); 

Answer 4

Vous pouvez utiliser $(".class").click isntead de $("#showcategory1").click pour le déclencheur, utilisez l'identifiant pour sélectionner un article spécifique, et utiliser .siblings.hide() pour cacher tous les autres articles.