Basculer la classe dans jQuery

L’article d’aujourd’hui parlera de la classe toggle dans jQuery.

Basculer la classe dans jQuery

jQuery fournit une méthode toggle de classe intégrée. Cet événement ajoute ou supprime une ou plusieurs classes de chaque élément dans l’ensemble des éléments correspondants en fonction de l’existence de la classe ou de la valeur de l’argument d’état.

Syntaxe:

.toggleClass(className).toggleClass(classNames)

1. className est une ou plusieurs classes (séparées par des espaces) à basculer pour chaque élément de l’ensemble correspondant.
2. classNames est un tableau de classes qui basculent pour chaque élément de l’ensemble correspondant.

La méthode toggle prend une ou plusieurs classes en paramètres. Si un élément de l’ensemble d’éléments correspondant a déjà la classe dans la première version, il est supprimé.

Si un élément n’a pas la classe, il sera ajouté. On peut appliquer .toggleClass() à un simple <div> par exemple.

Le deuxième modèle de .toggleClass() utilise le deuxième paramètre pour déterminer s’il faut ou non ajouter ou éliminer la classe. Si la valeur de ce paramètre est true, la classe est ajoutée ; si false, la classe est éliminée.

Si aucun argument n’est dépassé pour .toggleClass() bascule toutes les classes de l’élément lorsque .toggleClass() est invoqué comme pour la première fois.

Comprenons-le avec l’exemple suivant.

<p class="blue">Click on me to change color</p>

.blue {
    color: blue;
  }
.highlight {
    background: yellow;
}

$('p').click(function() {
  $(this).toggleClass('highlight');
});

L’exemple ci-dessus a défini une balise de paragraphe avec une classe bleu. Une fois que l’utilisateur a cliqué sur le paragraphe, il appliquera .toggleClass("highlight") au paragraphe.

Exécutez le code ci-dessus dans n’importe quel navigateur prenant en charge jQuery ; il affichera le résultat ci-dessous.

Production:

Avant toggle :

Après toggle :