Comment masquer des éléments (y compris l'élément déclencheur) après une interaction JavaScript ?

Comment masquer des éléments après une interaction à l'aide de JavaScript

En HTML, les éléments peuvent être masqués ou affichés à l'aide de la propriété d'affichage de CSS. En manipulant cette propriété avec JavaScript, les développeurs peuvent basculer dynamiquement la visibilité des éléments.

Dans l'extrait de code fourni, la fonction showStuff() est déclenchée lorsque l'on clique sur le lien "Modifier". Cette fonction affiche l'élément textarea, qui est initialement masqué à l'aide de la commande display: none; style.

Cependant, la question demande également comment masquer à la fois le lien « Modifier » et le texte « Lorem ipsum ». Pour y parvenir, la fonction showStuff() peut être modifiée comme suit :

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';
}

Dans cette fonction mise à jour :

1. Le paramètre id reste le même, représentant l'ID du élément à afficher.
2. Un nouveau paramètre, text, est ajouté pour représenter l'ID CSS de l'élément de texte "Lorem ipsum" qui doit être caché.
3. Un nouveau paramètre, btn, est ajouté pour représenter l'élément HTML (le lien "Modifier" dans ce cas) qui doit être masqué après avoir cliqué.

Dans le code HTML mis à jour, la même fonction est appelée avec des paramètres supplémentaires :

<td>

Maintenant, lorsque vous cliquez sur le lien "Modifier", non seulement la zone de texte deviendra visible, mais à la fois le Le texte « Lorem ipsum » et le lien « Modifier » lui-même seront masqués. Cela montre comment JavaScript peut être utilisé pour manipuler la visibilité de plusieurs éléments dans un seul appel de fonction.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!