So ermitteln Sie, ob ein Element in jquery ausgeblendet oder angezeigt wird

Vorwort

In der Webentwicklung müssen wir häufig die Anzeige oder das Ausblenden eines Elements entsprechend der Bedienung des Benutzers ändern. Zu diesem Zeitpunkt müssen Sie einige APIs in jQuery verwenden, um dies zu erreichen. In diesem Artikel erfahren Sie, wie Sie mit jQuery den ausgeblendeten und angezeigten Status von Elementen ermitteln und wie Sie deren Status ändern.

1. Bestimmen Sie, ob das Element ausgeblendet ist.

Wir können die Methode .is(":hidden") verwenden, um festzustellen, ob das Element ausgeblendet ist. Der Beispielcode lautet wie folgt:

if ($("#test").is(":hidden")) {
  console.log("The element is hidden.");
} else {
  console.log("The element is visible.");
}

Im obigen Code finden wir zuerst das Element mit dem ID-Test und verwenden dann die Methode .is(":hidden"), um zu bestimmen, ob es ausgeblendet ist. Wenn das Element ausgeblendet ist, drucken Sie das Element aus. Andernfalls drucken Sie das Element aus.

2. Bestimmen Sie, ob das Element angezeigt wird

Um festzustellen, ob das Element angezeigt wird, können wir die Methode .is(":visible") verwenden. Der Beispielcode lautet wie folgt:

if ($("#test").is(":visible")) {
  console.log("The element is visible.");
} else {
  console.log("The element is hidden.");
}

Im obigen Code finden wir immer noch das Element mit dem ID-Test und verwenden dann die Methode .is(":visible"), um zu bestimmen, ob es angezeigt wird. Wenn das Element angezeigt wird, drucken Sie das Element. Andernfalls wird das Element ausgeblendet.

3. Den Anzeige-/Ausblendstatus des Elements ändern

Wenn wir den Anzeige-/Ausblendstatus des Elements ändern möchten, können wir die Methode .toggle() verwenden. Diese Methode ermittelt automatisch den Status des Elements. Wenn das Element derzeit ausgeblendet ist, wird es umgekehrt angezeigt. Der Beispielcode lautet wie folgt:

$("#test").toggle();

Im obigen Code suchen wir zuerst das Element mit dem ID-Test und verwenden dann die Methode .toggle(), um seinen Ein-/Ausblenden-Status zu wechseln.

Es ist zu beachten, dass, wenn die .toggle()-Methode keinen Parameter übergibt, nur der Anzeige-/Ausblendungsstatus des Elements geändert wird Element entsprechend dem Wert des Parameters. Zum Beispiel:

$("#test").toggle(true);

Im obigen Code setzen wir den Parameter auf true, was bedeutet, dass der Anzeigestatus des anzuzeigenden Elements festgelegt wird. Wenn das Element bereits angezeigt wird, hat diese Methode keine Auswirkung.

4. Elemente ein-/ausblenden

Wenn wir Elemente direkt ein-/ausblenden möchten, anstatt ihren Status zu ändern, können wir die Methoden .show() und .hide() verwenden. Die Methode

.show() kann das Element anzeigen. Der Beispielcode lautet wie folgt:

$("#test").show();

Im obigen Code legen wir den Anzeigestatus des anzuzeigenden Elements fest. Die Methode

.hide() kann Elemente ausblenden. Der Beispielcode lautet wie folgt:

$("#test").hide();

Im obigen Code setzen wir den Anzeigestatus des Elements auf ausgeblendet.

Es ist zu beachten, dass die Methoden .show() und .hide() einige optionale Parameter haben, mit denen sich die Geschwindigkeit und Methode von Animationseffekten steuern lässt. Informationen zur Verwendung dieser Parameter finden Sie in der offiziellen Dokumentation von jQuery.

5. Zusammenfassung

In der Einleitung dieses Artikels haben wir gelernt, wie man mit jQuery den Anzeige-/Ausblendstatus von Elementen ermittelt und deren Status wechselt. In der tatsächlichen Entwicklung können wir viele interessante Funktionen basierend auf diesen APIs implementieren, z. B. das Umschalten des Anzeige-/Ausblendstatus eines Elements, wenn der Benutzer auf eine Schaltfläche klickt, oder das Ändern des Anzeigeinhalts eines Elements in Echtzeit basierend auf Benutzereingaben usw . Warten.

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie, ob ein Element in jquery ausgeblendet oder angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!