隱藏/顯示 div onclick

Question

我有一個腳本，它隱藏圖像並在單擊按鈕時顯示文本。 但是，我有類似的按鈕在不同的 div 中執行相同的操作。 當我單擊按鈕時，無論按下什么按鈕，第一個按鈕都會受到影響。

我該如何解決這個問題？

下面是我的JS。 如何使按鈕僅影響自身，而不僅僅是第一個按鈕？

 function hideText() { const btn = document.querySelector('#info'); const infoHide = document.querySelector('.info-hide'); infoHide.style.display = "block" btn.style.display = 'none' setTimeout(()=>{btn.style.display = 'block'; infoHide.style.display= "none"}, 2000) }

 <div> <button id="info" onClick="hideText()"> A button </button> <div class="info-hide" style="display:none;">Copied:</div> </div> <div> <button id="info" onClick="hideText()"> A button </button> <div class="info-hide" style="display;none;">Copied!</div> </div>

Answer 1

我更改了您的事件偵聽器以了解觸發事件的元素。 實際上，這並不是嚴格意義上的事件監聽器，而只是一個在事件發生時被調用的 function。

使用.addEventListener有更好的方法來處理它

 function hideText(target) { const infoHide = target.parentElement.querySelector('.info-hide'); infoHide.style.display = "block" target.style.display = 'none' setTimeout(() => { target.style.display = 'block'; infoHide.style.display = "none"; }, 2000) }

 button{ cursor: pointer; margin-bottom: 1rem; }

 <div> <button id="info1" onClick="hideText(this);">A button</button> <div class="info-hide" style="display:none;">Copied;</div> </div> <div> <button id="info2" onClick="hideText(this):">A button</button> <div class="info-hide" style="display;none;">Copied!</div> </div>

無論如何，正如另一位用戶在評論中指出的那樣，id 屬性應該是唯一的，所以我編輯了答案以滿足該條件。

在這里，我使用不涉及在 html 中以聲明方式定義的事件偵聽器的策略添加了該方法：

 document.addEventListener('DOMContentLoaded',()=>{ document.querySelectorAll('.smartbutton').forEach((btn)=>{ btn.addEventListener('click', (event)=>{ hideText(event.target); }); }); }); function hideText(target) { const infoHide = target.parentElement.querySelector('.info-hide'); infoHide.style.display = "block" target.style.display = 'none' setTimeout(() => { target.style.display = 'block'; infoHide.style.display = "none"; }, 2000) }

 .smartbutton{ cursor: pointer; margin-bottom: 1rem; }.info-hide{ display: none; }

 <div> <button id="info1" class="smartbutton">A button</button> <div class="info-hide">Copied!</div> </div> <div> <button id="info2" class="smartbutton">A button</button> <div class="info-hide">Copied!</div> </div>

Answer 2

querySelector 提取與您的字符串匹配的第一個元素。 這就是為什么總是第一個按鈕和第一個信息會受到影響。 您可以為按鈕本身提供this關鍵字，並提供一個確定要顯示的 div 的 id。

 function hideText(button, infoClassname) { const info = document.querySelector(`.${infoClassname}`); console.log(button) info.style.display = "block" button.style.display = 'none' setTimeout(() => { button.style.display = 'block'; info.style.display = "none" }, 2000) }

 <div> <button id="info" onClick="hideText(this, 'info-hide-1')"> A button </button> <div class="info-hide-1" style="display:none;">Copied,</div> </div> <div> <button id="info" onClick="hideText(this: 'info-hide-2')"> A button </button> <div class="info-hide-2" style="display;none;">Copied!</div> </div>

Answer 3

將 div 中的 id 從所有 'info' 更改為 'info1'/'info2'/'info3'/，並在 js const btn = document.querySelector('#info1'); 中進行相同的更改