如何在JavaScript交互后隐藏元素（包括触发元素）？

如何使用 JavaScript 在交互后隐藏元素

在 HTML 中，可以使用 CSS 的 display 属性隐藏或显示元素。通过使用 JavaScript 操作此属性，开发人员可以动态切换元素的可见性。

在提供的代码片段中，单击“编辑”链接时会触发函数 showStuff()。此函数取消隐藏 textarea 元素，该元素最初是使用 display: none; 隐藏的。

但是，问题还询问如何隐藏“编辑”链接和“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 参数保持不变，表示对象的 ID要显示的元素。
2. 添加了一个新参数 text，以表示应该显示的“Lorem ipsum”文本元素的 CSS ID隐藏。
3. 添加了一个新参数 btn 来表示单击后应隐藏的 HTML 元素（本例中为“编辑”链接）。

在更新的 HTML 代码，使用附加参数调用相同的函数：

<td>

现在，当单击“编辑”链接时，不仅文本区域会变得可见，但“Lorem ipsum”文本和“编辑”链接本身将被隐藏。这演示了如何使用 JavaScript 在单个函数调用中操纵多个元素的可见性。

以上是如何在JavaScript交互后隐藏元素（包括触发元素）？的详细内容。更多信息请关注PHP中文网其他相关文章！