Ajouter des attributs aux noeuds

Dans la page précédente vous avez vu qu'avec la méthode attr() on peut récupérer et modifier la valeur d'un attribut.
Cette même méthode permet d'ajouter des attributs à un noeud, par exemple, ajouter l'attribut class ...

Exemple

Le code CSS & HTML de la page

... <style> section {width : 100% ; height : 600px ; border : 2px solid black ; margin : auto ; } .marine {background : aqua ; color : navy ; border-color : navy ; } .barbie {background : pink ; color : purple ; border-color : purple; } .gothique {background : black ; color : red ;border-color : red ; } ... <body> <section> <h1>Changer la mise en forme d'une page avec jQuery</h1> ... <button>style marine </button> <button>style barbie </button> <button>style gothique </button> </section> ...

Dans le cadre du "responsive web design" la largeur de SECTION exprimée en %.

Dans la feuille de style interne trois classes sont définies : marine, barbie et gothique.
Chaque classe affecte une couleur au fond de la boîte, une couleur au texte et une couleur à la bordure de boîte.

Objectif du script

Lorsque vous cliquez sur le premier bouton vous devez affecter aux trois noeuds (section, h1, P) la classe "marine" donc en fait ajouter le code HTML : class ="marine" à ces trois balises.
Lorsque vous cliquez sur le deuxième bouton vous devez affecter aux trois noeuds (section, h1, P) la classe "barbie" donc en fait ajouter le code HTML : class ="barbie" à ces trois balises.
etc.

L'attribut class ne peut être présent plusieurs dans une balise. Donc le fait d'ajouter, par exemple, à une balise class ="gothique" supprime class ="barbie" ou class ="marine" !

Le script

var nomclasse =""; // création d'une variable globale $("button:eq(0)").click(function() {nomclasse ="marine"; fclasse(); }); $("button:eq(1)").click(function() {nomclasse ="barbie"; fclasse(); }); $("button:eq(2)").click(function() {nomclasse ="gothique"; fclasse();}); function fclasse() { $("section").attr("class",nomclasse); $("h1").attr("class", nomclasse); $("p").attr("class", nomclasse); }

Commentaire du code

Examinons attentivement ce script qui contient de nombreuses nouveautés !
On crée une variable globale (en dehors de toutes fonctions) qui va récupérer le nom de la classe à utiliser : nomclasse.

$("button:eq(0)").click(function() {nomclasse ="marine"; fclasse(); });
Traduisons cette instruction : si clic sur le premier bouton appel d'une fonction anonyme qui affecte la valeur "marine" à la variable nomclasse et qui ensuite appelle la fonction fclasse
Pour distinguer les différentes noeuds affectés de la même balise vous pouvez utiliser bien sûr le suffixe :first ou :last mais quand il y en a plus de deux balises de même type il faut utiliser :eq(indice) !
Ainsi"button:eq(0)" signifie "bouton d'indice 0 c'est à dire le premier !

Examinons maintenant la fonction fclasse !
$("section").attr("class",nomclasse) : affecter à la balise section la classe dont le nom est contenu dans la variable globale nomclasse.
Testez l'exemple

Deuxième solution

Plutôt que la méthode attr("class",nomDeClasse) on pourrait utiliser la méthode addClass(nomDeClasse).

Attention cette méthode ajoute une classe à l'élément HTML mais sans supprimer celle qui éventuellement lui était déjà affectée !
Donc il faut souvent combiner la méthode addClass(nomDeClasse) avec la méthode removeClass(nomDeClasse). Faut-il rappeler que remove en anglais veut dire supprimer ?

Le code CSS & HTML

Aucun changement !

Le script

var nomclasse =""; $("button:eq(0)").click(function() {nomclasse ="marine"; fsupp() ; fajout();}); $("button:eq(1)").click(function() {nomclasse ="barbie"; fsupp(); fajout(); }); p$("button:eq(2)").click(function() {nomclasse ="gothique";fsupp(); fajout();}); function fsupp() { $("section,h1,p").removeClass("marine").removeClass("barbie").removeClass("gothique"); } function fajout() { $("section,h1,p").addClass(nomclasse); }

Commentaire du script

A l'occasion d'un clic sur l'un des boutons de commande le contenu de la variable globale nomclasse change et ensuite il y a appel des fonctions fsupp et fajout.
La fonction fsupp supprime les trois classes des trois noeuds.
La fonction fajout ajoute une des trois classes aux trois noeuds en fonction de la valeur de la variable nomclasse.
Testez cette deuxième solution

Troisième solution

On peut aussi utiliser la méthode toggleClass(nomClasse).
Cette méthode ajoute la classe précisée si elle n'est pas encore appliquée à l'élément HTML ou la supprime si elle est déjà associée au noeud. Il y a donc un effet bascule.

Le code CSS & HTML

... <h1>Changer la mise en forme d'une page avec jQuery</h1> <p>Au départ aucune classe n'est affectée aux trois noeuds SECTION, H1 et P. <p class ="remarque">Pour éviter tout blocage : retirer une classe(en recliquant sur le bouton) avant d'en appliquer une nouvelle ! <button>Appliquer/retirer la classe "marine"</button> <button>Appliquer/retirer la classe "barbie"</button> <button>Appliquer/retirer la classe "gothique"</button>

Le CSS est inchangé.
Dans le HTML un message d'avertissement pour éviter le blocage.
En effet le nombre de classes que l'on peut appliquer à un noeud n'est pas illimité ...

Le script

$("button:eq(0)").click(function() {$("section, h1, p").toggleClass("marine"); }); $("button:eq(1)").click(function() {$("section, h1, p").toggleClass("barbie"); }); $("button:eq(2)").click(function() {$("section, h1, p").toggleClass("gothique");});

Dans chacune des trois fonctions anonymes une instruction unique basée sur la méthode toggleClass.
Testez la troisième solution !

Vous avez dû connaître des situations de blocage.
Il a fallu que, par exemple, vous retiriez une classe (en recliquant sur le bouton correspondant) pour en ajouter une nouvelle.

Amélioration du script

Il suffit de modifier légèrement le script pour éviter tout risque de blocage.

Le script amélioré :

$("button:eq(0)").click(function() {$("section, h1, p").removeClass("barbie").removeClass("gothique").toggleClass("marine");}); $("button:eq(1)").click(function() {$("section, h1, p").removeClass("marine").removeClass("gothique").toggleClass("barbie");}); $("button:eq(2)").click(function() {$("section, h1, p").removeClass("marine").removeClass("barbie").toggleClass("gothique");});

Avant d'appliquer une classe aux trois noeuds on supprime éventuellement les deux autres classes.
Essayez la solution toogleClass débuggée !

Il ne devrait plus y avoir de cas de blocage !
Retour menu