如何正确在 for 循环中为 DOM 元素绑定事件并访问对应索引的关联元素

本文详解 javascript 中因闭包与变量提升导致的循环内事件处理器访问错误索引的问题，并提供安全、可复用的解决方案。

在使用 for...of 循环为多个 DOM 元素批量添加事件监听器时，一个常见却隐蔽的陷阱是：事件回调函数中引用的循环变量（如 elementCounter）并非其定义时的值，而是在事件真正触发时才求值。由于循环早已结束，此时 elementCounter 已超出数组边界（例如长度为 3 的数组，最终值为 3），导致 accordions_content[elementCounter] 访问 undefined —— 这正是你遇到的问题。

根本原因在于：JavaScript 中 var 和 let 声明的变量在闭包中存在「延迟求值」行为。你的原始代码中：

for (let accordion of accordions) {
  accordions[elementCounter].addEventListener("click", function() {
    console.log(accordions_content[elementCounter]); // ❌ elementCounter 此时已是 3（循环结束后）
  });
  elementCounter++;
}

虽然 let 提供了块级作用域，但 elementCounter 是在外部作用域声明的，每次迭代仍共享同一变量绑定；且 function() { ... } 是一个闭包，在点击发生时才执行，此时 elementCounter === 3，而 accordions_content[3] 超出索引范围（合法索引为 0, 1, 2），因此返回 undefined。

✅ 正确做法是：在每次迭代中，立即将当前索引对应的元素捕获为局部常量，再传入事件回调。这样确保回调内部引用的是「快照值」，而非动态变化的计数器：

const accordions = document.getElementsByClassName("faq-accordion");
const accordions_content = document.getElementsByClassName("faq-accordion__content");

for (let i = 0; i < accordions.length; i++) {
  const content = accordions_content[i]; // ✅ 立即获取并固化当前 content 元
素
  accordions[i].addEventListener("click", function() {
    console.log(content);        // ✅ 始终输出正确的 .faq-accordion__content 元素
    console.log(i);              // ⚠️ 注意：i 在此处仍是 3（若用 let 声明于循环外），但 content 已安全捕获
  });
}

更现代、更推荐的方式是直接利用 for...of 配合 Array.from() 将类数组转为真数组，并结合 entries() 获取索引与元素：

const accordions = Array.from(document.getElementsByClassName("faq-accordion"));
const accordions_content = Array.from(document.getElementsByClassName("faq-accordion__content"));

accordions.forEach((accordion, index) => {
  const content = accordions_content[index];
  accordion.addEventListener("click", () => {
    console.log(content); // ✅ 安全访问对应内容区
    content.classList.toggle("active"); // 示例：切换展开状态
  });
});

? 关键总结：

• ❌ 避免在事件回调中直接使用循环变量（尤其是 let 声明于循环外部的计数器）进行数组索引；
• ✅ 使用 const content = array[i] 在循环体内提前捕获所需值；
• ✅ 优先将 HTMLCollection 转为 Array，再使用 forEach 或 for...of + entries()，语义清晰且天然规避闭包陷阱；
• ? 调试时可用 console.log(accordions.length, accordions_content.length) 确认两个集合长度一致，避免结构性错位。

该模式不仅适用于 FAQ 折叠面板，也广泛适用于轮播图控制、表单组绑定、动态列表交互等场景——掌握它，即可彻底告别「循环里 undefined」的调试噩梦。