Comment modifier le nom de la classe d'élément en cliquant sur jquery

jquery implémente la méthode de modification du nom de classe d'un élément en cliquant : 1. Liez un événement click à l'élément et spécifiez une fonction de traitement d'événement 2. Utilisez la méthode attr() dans la fonction de traitement d'événement pour modifier la classe ; nom de l'élément. La syntaxe est " $(selector).attr('class','new class name');".

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.0, ordinateur Dell G3.

Comment jquery peut modifier le nom de la classe d'élément en un seul clic

1 Créez une nouvelle page HTML avec le nom de fichier test.html, qui est utilisé pour faire fonctionner l'élément div. Chargez le fichier jquery.min.js dans la page html. Ce fichier intègre toutes les méthodes de jquery Ce n'est que lorsque le fichier est chargé avec succès que les méthodes de jquery peuvent être utilisées. Créez un nouvel élément div sur la page html et donnez-lui un nom de classe rouge.

Afin d'obtenir des effets évidents après avoir cliqué, la couleur d'arrière-plan du div avec class="red" est définie comme rouge via CSS, et lorsque le nom de la classe est noir, la couleur d'arrière-plan est noire.

2. Ajoutez un événement onclick à l'élément div. Lorsque l'événement onclick est déclenché, exécutez la méthode change_color(). Cette méthode est principalement utilisée pour changer la classe du div.

Écrivez le code pour changer la classe de l'élément div dans change_color(), de sorte que lorsque l'on clique sur le div, class="red" change en class="black" pour réaliser la fonction de changement du nom de la classe. Principalement via la méthode attr() dans jquery, le nom de la classe est modifié.

Exécutez le code et affichez les résultats dans le navigateur :

On peut voir que la fonction consistant à cliquer sur le div pour changer le nom de la classe est implémentée.

Tutoriels vidéo associés recommandés : Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!