如何在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><p>現在，當點擊「編輯」連結時，不僅文字區域會變得可見，但“Lorem ipsum”文字和“編輯”連結本身將被隱藏。這示範如何使用 JavaScript 在單一函數呼叫中操縱多個元素的可見性。 </p></td>

以上是如何在JavaScript互動後隱藏元素（包含觸發元素）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！