Wie verstecke ich Elemente (einschließlich des auslösenden Elements) nach einer JavaScript-Interaktion?

So blenden Sie Elemente nach einer Interaktion mit JavaScript aus

In HTML können Elemente mithilfe der Anzeigeeigenschaft von CSS ausgeblendet oder angezeigt werden. Durch Bearbeiten dieser Eigenschaft mit JavaScript können Entwickler die Sichtbarkeit von Elementen dynamisch umschalten.

Im bereitgestellten Code-Snippet wird die Funktion showStuff() ausgelöst, wenn auf den Link „Bearbeiten“ geklickt wird. Diese Funktion blendet das textarea-Element ein, das zunächst mit der Anzeige display: none; Stil.

Allerdings wird auch gefragt, wie sowohl der „Bearbeiten“-Link als auch der „Lorem ipsum“-Text ausgeblendet werden können. Um dies zu erreichen, kann die Funktion showStuff() wie folgt geändert werden:

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

In dieser aktualisierten Funktion:

1. Der Parameter id bleibt gleich und stellt die ID des dar Element, das angezeigt werden soll.
2. Ein neuer Parameter, text, wird hinzugefügt, um die CSS-ID des Textelements „Lorem ipsum“ darzustellen, das angezeigt werden soll versteckt.
3. Ein neuer Parameter, btn, wird hinzugefügt, um das HTML-Element (in diesem Fall der Link „Bearbeiten“) darzustellen, das nach dem Klicken ausgeblendet werden soll.

Im aktualisierter HTML-Code, die gleiche Funktion wird mit zusätzlichen Parametern aufgerufen:

<td>

Wenn nun auf den Link „Bearbeiten“ geklickt wird, wird nicht nur der Textbereich sichtbar, sondern beides Der Text „Lorem ipsum“ und der Link „Bearbeiten“ selbst werden ausgeblendet. Dies zeigt, wie JavaScript verwendet werden kann, um die Sichtbarkeit mehrerer Elemente in einem einzigen Funktionsaufruf zu manipulieren.

Das obige ist der detaillierte Inhalt vonWie verstecke ich Elemente (einschließlich des auslösenden Elements) nach einer JavaScript-Interaktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!