Heim > Web-Frontend > Front-End-Fragen und Antworten > jquery entfernt eine Klasse

jquery entfernt eine Klasse

王林
Freigeben: 2023-05-14 11:16:07
Original
4530 Leute haben es durchsucht

In der Front-End-Entwicklung müssen wir häufig die Klassenattribute von DOM-Elementen manipulieren, um verschiedene interaktive Effekte zu erzielen. In jQuery können wir das Klassenattribut von Elementen einfach manipulieren. Aber manchmal müssen wir eine bestimmte Klasse löschen. Was sollen wir zu diesem Zeitpunkt tun? In diesem Artikel wird erläutert, wie Sie mit jQuery eine Klasse entfernen.

1. Verwenden Sie die Methode „removeClass“

jQuery bietet eine Methode namens „removeClass“, um die Klasse eines Elements zu löschen. Das Format ist wie folgt:

$(selector).removeClass(className)
Nach dem Login kopieren

Unter diesen bezieht sich „Selektor“ auf den Selektor des zu bedienenden Elements und „Klassenname“ ist der Name der zu löschenden Klasse.

Wenn wir beispielsweise die Klasse „aktiv“ eines Elements mit der ID „test“ löschen möchten, können wir so schreiben:

$("#test").removeClass("active");
Nach dem Login kopieren

Diese Methode löscht die angegebene Klasse des ausgewählten Elements aus der Klassenliste .

Beachten Sie, dass Sie, wenn Sie mehrere Klassen löschen möchten, diese durch Leerzeichen trennen müssen, zum Beispiel:

$("#test").removeClass("active hidden");
Nach dem Login kopieren

2 Verwenden Sie die attr-Methode

Zusätzlich zur Verwendung der Methode „removeClass“ können wir auch die Methode „attr“ verwenden Klassen löschen.

$(selector).attr("class", "")
Nach dem Login kopieren

Diese Methode setzt den Wert des Klassenattributs des ausgewählten Elements auf eine leere Zeichenfolge, was dem Löschen aller Klassen entspricht.

$("#test").attr("class", "");
Nach dem Login kopieren

3. Verwenden Sie die toggleClass-Methode

Zusätzlich zum Löschen von Klassen müssen wir manchmal auch Klassen wechseln. Am Beispiel der toggleClass-Methode kann die angegebene Klasse hinzugefügt oder gelöscht werden. Wenn das Element bereits über die angegebene Klasse verfügt, wird die Klasse gelöscht.

Wir können zwei Parameter an die toggleClass-Methode übergeben, einer ist der zu wechselnde Klassenname und der andere ist der optionale Schalterparameter. Wenn der Schalterparameter wahr ist, wird die Klasse hinzugefügt; wenn der Schalterparameter falsch ist, wird die Klasse gelöscht.

Das Folgende ist das Format der toggleClss-Methode:

$(selector).toggleClass(className, switch)
Nach dem Login kopieren

Zum Beispiel haben wir eine Schaltfläche und ihre Klasse kann verwendet werden, um den Schaltflächenstatus umzuschalten (z. B. auf „aktiv“ oder „deaktiviert“ umzuschalten). so geschrieben werden:

$("#btn").click(function(){
  $(this).toggleClass("active disabled");
});
Nach dem Login kopieren

Wenn wir auf eine Schaltfläche klicken, wird ihre Klasse entsprechend hinzugefügt oder entfernt.

Zusammenfassung

Kurz gesagt, das Entfernen einer Klasse in jQuery ist sehr einfach. Verwenden Sie einfach die Methode „removeClass“ oder „attr“. Wenn Sie die Klasse wechseln müssen, verwenden Sie die toggleClass-Methode. Diese Methoden werden häufig in jQuery verwendet. Wenn Sie sie beherrschen, können Sie mit halbem Aufwand in der Front-End-Entwicklung das Doppelte des Ergebnisses erzielen.

Das obige ist der detaillierte Inhalt vonjquery entfernt eine Klasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage