本文详解 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。
✅ 正确做法是：在每次迭代中，立即将当前索引对应的元素捕获为局部常量，再传入事件回调。这样确保回调内部引用的是「快照值」，而非动态变化的计数器：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
const accordions = document.getElementsByClassName("faq-accordion");
const accordions_content = document.getElementsByClassName("faq-accordion__content");
for (let i = 0; i <p>更现代、更推荐的方式是直接利用 for...of 配合 Array.from() 将类数组转为真数组，并结合 entries() 获取索引与元素：</p><pre class="brush:php;toolbar:false;">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」的调试噩梦。
