for循环事件监听中accordions_content[elementCounter]未定义问题

问题描述 #

在使用for循环为元素绑定点击事件时，事件回调内的accordions_content[elementCounter]始终返回undefined，但循环外部及事件监听外部该变量可正常访问。

原始代码 #

JavaScript代码 #

let accordions = document.getElementsByClassName("faq-accordion");
let accordions_content = document.getElementsByClassName("faq-accordion__content");
let elementCounter = 0;
for(let accordion of accordions) {
        accordions[elementCounter].addEventListener("click", function() {
            console.log(accordions_content[elementCounter]);
        })
    elementCounter++;
}
})

HTML结构 #

<div class="faq">
            <div class="faq-accordion">
                <div class="faq-accordion__headline">
                    <h5>Das ist eine Headline</h5>
                </div>
                <div class="faq-accordion__content">
                    <p>Das ist ein Text</p>
                </div>
            </div>

            <div class="faq-accordion">
                <div class="faq-accordion__headline">
                    <h5>Das ist eine Headline</h5>
                </div>
                <div class="faq-accordion__content">
                    <p>Das ist ein Text</p>
                </div>
            </div>

            <div class="faq-accordion">
                <div class="faq-accordion__headline">
                    <h5>Das ist eine Headline</h5>
                </div>
                <div class="faq-accordion__content">
                    <p>Das ist ein Text</p>
                </div>
            </div>
        </div>  

问题原因 #

核心是闭包的变量绑定特性：

• 你在循环外声明的elementCounter是外层作用域变量，所有事件回调函数都共享这个变量的引用。
• 循环执行速度远快于用户点击操作，当用户触发点击事件时，循环早已结束，elementCounter的值已经变成了3（3个元素循环结束后，counter自增到3）。
• 而accordions_content的长度为3，有效索引范围是0-2，访问索引3自然返回undefined。

解决方案 #

有几种常见的修复方式：

1. 利用let的块级作用域特性 #

把elementCounter的声明放到循环内部，每次循环都会创建独立的变量实例，避免共享引用：

let accordions = document.getElementsByClassName("faq-accordion");
let accordions_content = document.getElementsByClassName("faq-accordion__content");
for(let elementCounter = 0; elementCounter < accordions.length; elementCounter++) {
    accordions[elementCounter].addEventListener("click", function() {
        console.log(accordions_content[elementCounter]);
    })
}

2. 直接通过DOM关系获取对应内容 #

不需要依赖索引，从点击的元素本身查找子内容，更健壮（避免DOM结构变化导致索引不匹配）：

let accordions = document.getElementsByClassName("faq-accordion");
for(let accordion of accordions) {
    accordion.addEventListener("click", function() {
        const content = this.querySelector(".faq-accordion__content");
        console.log(content);
    })
}

3. 用闭包包裹变量 #

通过立即执行函数表达式（IIFE）为每个回调创建独立作用域，保存当前循环的索引值：

let accordions = document.getElementsByClassName("faq-accordion");
let accordions_content = document.getElementsByClassName("faq-accordion__content");
let elementCounter = 0;
for(let accordion of accordions) {
    (function(counter) {
        accordion.addEventListener("click", function() {
            console.log(accordions_content[counter]);
        })
    })(elementCounter);
    elementCounter++;
}

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