如何解决JavaScript循环绑定按钮点击事件时点击单个触发全部的问题

你当前的代码问题核心不是事件绑定的循环逻辑错误，而是showDetails函数的内部实现有问题：只要该函数被触发，就会遍历所有.details元素，把它们全部设为显示状态，所以你会误以为点击单个按钮触发了所有按钮的点击事件，本质上是单个按钮触发的函数主动打开了全部详情。

这里提供两种常用的实现思路，你可以根据自己的DOM结构选择：

方案1：通过下标关联按钮和对应详情 #

利用let声明的块级作用域特性，绑定事件时直接关联当前循环的下标，点击时只操作对应下标的详情元素：

// 提前统一获取所有按钮和详情元素，避免重复查询DOM
const getDetails = document.querySelectorAll(".btn-details");
const allDetails = document.getElementsByClassName("details");

for (let i = 0; i < allProducts.length; i++) {
  getDetails[i].addEventListener("click", function() {
    // 仅修改当前下标对应的详情显示状态
    allDetails[i].style.display = "block";
  });
}

方案2：通过事件对象关联当前按钮和对应详情（更灵活） #

不需要依赖下标顺序，点击时通过事件对象拿到当前触发的按钮，再根据DOM结构匹配对应详情，适合后续DOM顺序可能调整的场景。
假设你的HTML结构是按钮和详情为相邻同级元素，示例如下：

<button class="btn-details">查看详情</button>
<div class="details" style="display: none;">对应详情内容</div>

对应的JS实现：

function showDetails(e) {
  // 获取当前被点击的按钮元素
  const currentBtn = e.target;
  // 根据实际DOM结构查找对应详情，这里是相邻同级元素的写法，可根据你的结构调整
  const currentDetail = currentBtn.nextElementSibling;
  currentDetail.style.display = "block";
}

const getDetails = document.querySelectorAll(".btn-details");
for (let i = 0; i < getDetails.length; i++) {
  getDetails[i].addEventListener("click", showDetails);
}

DOM查询操作（比如getElementsByClassName、querySelectorAll）尽量不要放在循环或者事件回调中重复执行，提前全局获取一次即可，能减少不必要的性能消耗。

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