So erhalten Sie den aktuellen Klassennamen in jquery

jQuery ist eine beliebte JavaScript-Bibliothek, die einige sehr praktische Methoden für die Arbeit mit HTML-Elementen und Seiteninteraktionen bietet. In vielen Fällen müssen wir den Klassennamen des aktuellen Elements abrufen, um verschiedene Vorgänge auszuführen, z. B. das Hinzufügen, Löschen oder Ändern von Klassennamen. In diesem Artikel wird erläutert, wie Sie mit jQuery den aktuellen Klassennamen abrufen, und es werden einige Beispiele bereitgestellt.

1. Grundlegende Methode zum Abrufen des aktuellen Klassennamens

Um den Klassennamen des aktuellen Elements zu erhalten, können Sie die .attr()-Methode von jQuery verwenden und „class“ übergeben als Parameter Eingabe:

var className = $("element").attr("class");

Wobei „Element“ eine jQuery-Selektorzeichenfolge ist, die ein beliebiger gültiger CSS-Selektor sein kann, z. B. Klassenname, ID, Tag-Name usw. Dieser Code gibt eine Zeichenfolge zurück, die alle Klassennamen des aktuellen Elements enthält, getrennt durch Leerzeichen.

Zum Beispiel haben wir den folgenden HTML-Code:

<div class="box small"></div>

Wir können den folgenden Code verwenden, um den Klassennamen des aktuellen Elements abzurufen:

var className = $("div.box.small").attr("class");
console.log(className); // 输出 "box small"

var className = $("element")[0].classList;

<div class="box small"></div>

var classList = $("div.box.small")[0].classList;
console.log(classList); // 输出 ["box", "small"]

1. Klassennamen hinzufügen

Um einen Klassennamen über jQuery hinzuzufügen, können Sie die Methode .addClass() verwenden. Beispiel:

$("element").addClass("new-class");

wobei „new-class“ der Name der Klasse ist, die hinzugefügt werden soll. Dieser Code fügt dem aktuellen Element einen Klassennamen namens „new-class“ hinzu.

Zum Beispiel haben wir den folgenden HTML-Code:

<div class="box small"></div>

Wir können den folgenden Code verwenden, um einen neuen Klassennamen hinzuzufügen:

$("div.box.small").addClass("big");

This wird dem aktuellen Element einen Klassennamen mit dem Namen „big“ hinzufügen:

<div class="box small big"></div>

2 Löschen Sie den Klassennamen

Klassennamen über jQuery, Sie können die Methode .removeClass() verwenden. Beispiel:

$("element").removeClass("old-class");

wobei „old-class“ der Name der zu löschenden Klasse ist. Dieser Code entfernt eine Klasse mit dem Namen „old-class“ aus dem aktuellen Element.

Zum Beispiel haben wir den folgenden HTML-Code:

<div class="box small"></div>

Wir können den folgenden Code verwenden, um einen Klassennamen zu entfernen:

$("div.box.small").removeClass("small");

Das wird Entfernen Sie einen Klassennamen aus dem aktuellen Element. Löschen Sie einen Klassennamen mit dem Namen „small“ aus. Der aktualisierte HTML-Code lautet wie folgt:

<div class="box"></div>

3 Klassennamen wechseln

$("element").toggleClass("class1 class2");

<div class="box small"></div>

$("div.box.small").toggleClass("small big");

<div class="box big"></div>

# 🎜🎜#Hier sind einige Beispiele, die zeigen, wie man den aktuellen Klassennamen mit jQuery erhält:

1 Gibt den aktuellen Klassennamen aus, wenn auf ein Element geklickt wird:

$("div").click(function() {
  var className = $(this).attr("class");
  console.log(className);
});

2 . Beim Scrollen Der Stil der Navigationsleiste beim Wechseln der Fenster:

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop >= 100) {
    $("nav").addClass("fixed-top");
  } else {
    $("nav").removeClass("fixed-top");
  }
});

3. Aktualisieren Sie den Bildtitel, wenn Sie Bilder im Karussell wechseln:

$(".carousel-item").on("slide.bs.carousel", function() {
  var captionText = $(this).find(".carousel-caption h4").text();
  var className = $(this).attr("class");
  console.log("当前类名：" + className);
  $(".slider-title").text(captionText);
});

Zusammenfassung

Das obige ist der detaillierte Inhalt vonSo erhalten Sie den aktuellen Klassennamen in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!