oujood.com

jQuery La méthode toggleClass() basculer entre l'ajout et la suppression de classes

La méthode toggleClass() pour basculer entre l'ajout et la suppression d'une ou plusieurs classes pour les éléments sélectionnés

chercher |

Définition et Usage la méthode toggleClass()

jQuery cours tutorial

La méthode toggleClass() bascule entre l'ajout et la suppression d'une ou plusieurs classes pour les éléments sélectionnés.

Cette méthode vérifie chaque élément pour les classes spécifiées. Les classes seront ajoutées si manquantes et enlevé si déjà existantes.

 Ce qui crée un effet de bascule.

Cependant, en utilisant le paramètre «commutateur», vous pouvez spécifier pour supprimer uniquement, ou seulement ajouter une classe.

Syntaxe

$(sélecteur).toggleClass(class, commutateur)

Paramètre Description
class Obligatoire. Spécifie un ou plusieurs noms de classe à ajouter ou supprimer.

Pour spécifier plusieurs classes, séparer les noms de classe avec un espace.
commutateur Facultatif. Une valeur booléenne spécifiant si la classe doit être ajoutée (vrai) ou supprimée (faux).

Exemple1

Basculer entre l'ajout et la suppression de la classe « principale » pour les éléments p :

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").toggleClass("main");
    });
  });
  </script>
  <style>
  .main
  {
  font-size:150%;
  color:red;
  }
  </style>
  </head>
  <body>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Changer de classe</button>
  <p><b>Note:</b> Cliquez sur le bouton plus
  d'une fois pour voir l'effet de bascule.</p>
  </body>
  </html>

Bascule de Classes à l'aide d'une fonction

On peut  utiliser  une fonction pour spécifier les classes qui  doivent être utilisées pour la bascule pour les éléments sélectionnés.

Syntaxe

$(sélecteur).toggleClass(function (index,class), commutateur)

Paramètre Description
function ( index,Class ) Spécifie une fonction qui retourne un ou plusieurs noms de classe pour ajouter/supprimer.
  • indice - facultatif. Reçoit la position d'index du sélecteur
  • classe - facultatif. Reçoit la classe actuelle du sélecteur
commutateur Facultatif. Une valeur booléenne spécifiant si la classe doit être ajoutée (vrai) ou supprimée (faux).

Exemple

Bascule de Classes à l'aide d'une fonction

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("li").toggleClass(function(n){
        return "listitem_" + n;
      });
    });
  });
  </script>
  <style>
  .listitem_1, .listitem_3
  {
  color:red;
  }
  .listitem_0, .listitem_2
  {
  color:blue;
  }
  </style>
  </head>
   
  <body>
  <h1>Le titre</h1>
  <ul>
  <li>Piére</li>
  <li>Luis</li>
  <li>Christine</li>
  <li>micheline</li>
  </ul>
  <button>Ajouter/suprimer classe</button>
  </body>
  </html>

Exemple

Basculer entre l'ajout et la suppression d'une classe
Comment utiliser la méthode toggleClass() pour basculer entre l'ajout et la suppression d'une classe.

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").toggleClass("main");
    });
  });
  </script>
  <style>
  .main
  {
  font-size:120%;
  color:red;
  }
  </style>
  </head>
  <body>
  <p>Ceci est un paragraphe.</p>
  <p class="main">Ceci est un autre paragraphe.</p>
  <button>basculer la classe "main" pour les éléments
  p</button>
  </body>
  </html>

Exemple

 En utilisant le paramètre de commutateur
Comment utiliser le paramètre  commutateur d'ajouter ou de supprimer d’une classe seulement.

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("#add").click(function(){
      $("p").toggleClass("main",true);
    });
    $("#remove").click(function(){
      $("p").toggleClass("main",false);
    });
  });
  </script>
  <style type="text/css">
  .main
  {
  font-size:120%;
  color:red;
  }
  </style>
  </head>
   
  <body>
  <p>Ceci est un paragraphe.</p>
  <p class="main">Ceci est un autre paragraphe.</p>
  <button id="add">Ajouter la classe "main"</button>
  <button id="remove">Suprimer la classe
  "main"</button>
  </body>
  </html>



Par gerywa 25 juillet 2014



Voir aussi nos tutoriel :

fonction crc32

Calcule la somme de contrôle CRC32

fonction gmmktime

Retourne le timestamp UNIX d'une date GMT

La boucle for...in javascript

La boucle for...in js : La boucle for... in peut exécuter des commandes à plusieurs reprises. La boucle for... in est couramment utilisée pour la manipulation d'objet.