如何使用 Vanilla JS 切換多個 html 文本元素？

Question

我正在嘗試使用最有效的方法在多個元素上切換 innerHTML。 我仍在學習並且在這一點上陷入困境

 var button = document.querySelectorAll(".title"); for (i=0; i < button.length; i++) { button[i].addEventListener('click', textToggle) } function textToggle() { if (button.getAttribute("data-text-swap") == button.innerHTML) { button.innerHTML = button.getAttribute("data-text-original"); } else { button.setAttribute("data-text-original", button.innerHTML); button.innerHTML = button.getAttribute("data-text-swap"); } }

 <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details> <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details>

Answer 1

你快到了。 您只需要對e.target元素進行操作，它是與click事件關聯的元素，而不是作為元素列表的button變量。

 var button = document.querySelectorAll(".title"); for (i=0; i < button.length; i++) { button[i].addEventListener('click', textToggle) } function textToggle(e) { const el = e.target; if (el.getAttribute("data-text-swap") == el.innerHTML) { el.innerHTML = el.getAttribute("data-text-original"); } else { el.setAttribute("data-text-original", el.innerHTML); el.innerHTML = el.getAttribute("data-text-swap"); } }

 <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details> <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details>

Answer 2

您指的button不是元素而是數組。 可以通過關鍵字this引用回調中點擊的按鈕

 var button = document.querySelectorAll(".title"); for (i=0; i < button.length; i++) { button[i].addEventListener('click', textToggle) } function textToggle() { if (this.getAttribute("data-text-swap") == this.innerHTML) { this.innerHTML = this.getAttribute("data-text-original"); } else { this.setAttribute("data-text-original", this.innerHTML); this.innerHTML = this.getAttribute("data-text-swap"); } }

 <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details> <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details>