Échange de classes sur click avec jQuery, en utilisant des éléments de la classe

J'ai écrit ce simple bit de jQuery qui permute la classe ul contenant en fonction de l'ancre contenue qui est cliquée. Ça fonctionne bien, mais je sais que c'est en désordre. Je me demandais si quelqu'un pourrait indiquer un moyen de faire le même effet sans avoir à entrer manuellement chaque nom de classe. Je suis juste un newb jQuery et je cherche à en apprendre plus à ce sujet. J'imagine qu'il y a une fonction jQuery que je pourrais écrire qui n'impliquerait pas d'insérer manuellement tous les noms de classe, mais qui pourrait simplement prendre la classe de la balise d'ancrage et l'injecter dans ul.Échange de classes sur click avec jQuery, en utilisant des éléments de la classe

Le jQuery

$("#infosplashnav a.news").click(function() { 
    $(this).parents("ul:eq(0)").removeClass(); 
    $(this).parents("ul:eq(0)").addClass("news"); 
}); 
$("#infosplashnav a.communitylife").click(function() { 
    $(this).parents("ul:eq(0)").removeClass(); 
    $(this).parents("ul:eq(0)").addClass("communitylife"); 
}); 
$("#infosplashnav a.youth").click(function() { 
    $(this).parents("ul:eq(0)").removeClass(); 
    $(this).parents("ul:eq(0)").addClass("youth"); 
});

Le code HTML

<ul id="infosplashnav" class="news"> 
    <li><a href="#news" class="news">News &amp; Events</a></li> 
    <li><a href="#communitylife" class="communitylife">Community Life</a></li> 
    <li><a href="#youth" class="youth">Youth</a></li> 
</ul>

Source

2009-12-16 jaasum

$("#infosplashnav a").click(function() { 
    $(this).closest("ul").removeClass().addClass($(this).attr("class")); 
});

Source

2009-12-16 09:23:55

C'est exactement ce que je cherchais, jamais nouveau sur .closest ou en utilisant .attr de cette façon. Merci! Fonctionne comme un charme et fait beaucoup de sens. – jaasum

+1 pour l'utilisation la plus proche au lieu des parents, beaucoup plus vite! –

Un autre +1 pour «plus proche». Aussi en pensant à utiliser la classe de l'objet courant. Brillant! –

Vous pouvez faire quelque chose comme ceci:

classNames = ["news", "communityLife", "youth"]; 

$.each(classNames, function(n, className) { 
    $("#infosplashnav a." + className).click(function() { 
    $(this).parents("ul:eq(0)").removeClass(); 
    $(this).parents("ul:eq(0)").addClass(className); 
    }); 
});

Source

2009-12-16 08:55:45 kgiannakakis

$ (this) .parents ("ul: eq (0)"). RemoveClass(); $ (this) .parents ("ul: eq (0)"). AddClass (className); ce 2 lignes peuvent être $ (this) .parents ("ul: eq (0)"). RemoveClass(). AddClass (className) ;, a appris une bonne technique de vous, vp foru :-) – Wondering

Cela semble être c'est juste faire la même chose d'une manière différente. Des idées sur la façon de l'obtenir pour saisir le nom de classe de #infosplashnav automatiquement, puis l'appliquer à la #infosplashnav? – jaasum

Voir cette question http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery. Ce n'est pas simple, car un élément peut avoir plusieurs classes. – kgiannakakis

Ne pas oublier que vous pouvez utiliser enchaînant ainsi, si

$(this).parents("ul:eq(0)").removeClass(); 
$(this).parents("ul:eq(0)").addClass("news");

peut-il devenir:

$(this).parents("ul:eq(0)").removeClass().addClass("news");

Source

2009-12-16 09:01:26

Oubliez? Je n'ai jamais su ça! Merci pour le conseil. – jaasum

Oui, certaines fonctions renvoient l'objet qui les appelle, cela signifie que vous pouvez les enchaîner. Il existe également des fonctions end() et andSelf() qui vous aident à référencer d'autres éléments de la chaîne. –

Échange de classes sur click avec jQuery, en utilisant des éléments de la classe

Répondre

Questions connexes