JavaScript インタラクション後に要素 (トリガー要素を含む) を非表示にする方法

JavaScript を使用して操作後に要素を非表示にする方法

HTML では、CSS の表示プロパティを使用して要素を非表示または表示できます。 JavaScript でこのプロパティを操作することで、開発者は要素の表示/非表示を動的に切り替えることができます。

提供されたコード スニペットでは、「編集」リンクがクリックされると関数 showStuff() がトリガーされます。この関数は、display: none; を使用して最初は非表示になっている textarea 要素を再表示します。 style.

ただし、この質問では、「編集」リンクと「Lorem ipsum」テキストの両方を非表示にする方法も尋ねています。これを実現するには、showStuff() 関数を次のように変更します。

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

この更新された関数内:

1. id パラメーターは同じままで、
2. 新しいパラメータ text が追加され、表示されるべき「Lorem ipsum」テキスト要素の CSS ID を表します。 hidden.
3. クリック後に非表示にする必要がある HTML 要素 (この場合は「編集」リンク) を表す新しいパラメーター btn が追加されます。

HTML コードを更新すると、同じ関数が追加のパラメータで呼び出されます:

<td>

ここで、[編集] リンクをクリックすると、 textarea は表示されますが、「Lorem ipsum」テキストと「編集」リンク自体は両方とも非表示になります。これは、JavaScript を使用して 1 回の関数呼び出しで複数の要素の可視性を操作する方法を示しています。

以上がJavaScript インタラクション後に要素 (トリガー要素を含む) を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。