如何在JavaScript循环遍历HTML元素时为每个元素独立调用函数？

首先得指出你代码里的两个小问题，然后再给出几种可行的解决方案：

原代码的问题 #

1. 循环边界错误：你写的i <= allItems.length会导致最后一次循环时访问allItems[allItems.length]，而querySelectorAll返回的类数组索引是从0开始的，最大索引是length-1，所以这里会拿到undefined，直接报错。应该改成i < allItems.length。
2. 箭头函数的this绑定问题：你的toggleSpinner是箭头函数，它的this会绑定外层作用域的this，而不是点击的元素，所以没法通过this获取元素内容。

解决方案1：利用事件对象获取点击元素 #

这是最通用的方式，通过事件参数的target属性拿到点击的元素，再获取它的文本内容：

let allItems = document.querySelectorAll(".description");
// 修复循环条件
for (let i = 0; i < allItems.length; i++) {
  allItems[i].addEventListener("click", toggleSpinner);
}

// 改成普通函数（或者用箭头函数接收event参数也可以）
function toggleSpinner(event) {
  // 拿到元素的文本并去除首尾空格
  const itemContent = event.target.textContent.trim();
  alert(`I clicked ${itemContent}`);
}

解决方案2：通过bind传递元素文本 #

在循环里提前获取每个元素的文本，用bind把文本作为参数传递给函数：

let allItems = document.querySelectorAll(".description");
for (let i = 0; i < allItems.length; i++) {
  const itemContent = allItems[i].textContent.trim();
  // 绑定文本作为第一个参数
  allItems[i].addEventListener("click", toggleSpinner.bind(this, itemContent));
}

function toggleSpinner(itemContent) {
  alert(`I clicked ${itemContent}`);
}

解决方案3：用forEach简化循环 #

querySelectorAll返回的对象可以直接用forEach遍历，代码更简洁，还能避免索引错误：

// 直接遍历每个元素
document.querySelectorAll(".description").forEach(item => {
  item.addEventListener("click", () => {
    const itemContent = item.textContent.trim();
    alert(`I clicked ${itemContent}`);
  });
});

这几种方法都能实现你要的效果，选哪种看你的场景：如果需要访问元素的其他属性，方案1更合适；如果想提前处理文本内容，方案2不错；追求代码简洁的话，方案3是最优解。

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