多按钮点击仅触发首个元素的JavaScript问题修复求助

问题出在两个核心点：

• HTML里重复使用了ID（两个按钮都是id="info"），ID在页面中必须唯一，浏览器只会识别第一个匹配的元素；
• 函数里用document.querySelector是全局查找，只会拿到第一个按钮和提示框，完全没关联你实际点击的那个按钮。

按下面的步骤修改就能解决：

1. 修改HTML结构 #

把重复的ID换成class，并且点击时把当前按钮传给函数：

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

2. 修改JS函数 #

接收当前点击的按钮作为参数，精准定位同区域的提示框：

function hideText(btn) { 
    // 通过当前按钮找到它紧邻的提示框元素
    const infoHide = btn.nextElementSibling;
    
    infoHide.style.display = "block"
    btn.style.display = 'none'
    setTimeout(()=>{
        btn.style.display = 'block'; 
        infoHide.style.display= "none"
    }, 2000)
}

关键修改说明 #

• 用class替代重复ID，符合HTML规范；
• 点击时传递this（当前按钮元素）给函数，让函数明确知道要操作哪个按钮；
• 用btn.nextElementSibling直接获取按钮旁边的提示框，或者也可以用btn.closest('div').querySelector('.info-hide')，两种方式都能精准定位到当前按钮所在区域的目标元素，不会影响其他区域。

内容的提问来源于stack exchange，提问作者Cosmochen