Heim  >  Artikel  >  Web-Frontend  >  jquery entfernt eine Klasse

jquery entfernt eine Klasse

王林
王林Original
2023-05-14 11:16:074512Durchsuche

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)

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");

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");

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", "")

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", "");

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)

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");
});

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!

Stellungnahme:
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