JS在for循环中使用addEventListener绑定点击事件修改元素高度失效问题

• getElementsByClassName 参数错误：该方法仅接收类名作为参数，不需要额外加CSS选择器的.前缀，你传入的".blocks"、".answers"会导致获取到空的元素集合，循环无法执行，事件自然绑定失败。
• 作用域与闭包问题：循环中没有声明i变量，默认挂载为全局变量，且事件回调是异步触发的，点击事件执行时循环早已结束，此时i的值等于元素集合的长度，超出answers数组的下标范围，会直接报错。
• 关联逻辑不可靠：直接通过全局answers数组的下标匹配对应答案，DOM结构稍有变动就会出现匹配错误。

// 去掉参数的.前缀，正确获取元素
const blocks = document.getElementsByClassName("blocks");

// 用let声明i，形成块级作用域，避免闭包问题
for (let i = 0; i < blocks.length; i++) {
    blocks[i].addEventListener("click", () => {
        // 从当前点击的块内查找对应的答案元素，避免下标匹配错误
        const targetAnswer = blocks[i].querySelector(".answers");
        targetAnswer.style.height = "30px";
    });
}

要确保折叠效果正常，需要给.answers元素添加CSS样式overflow: hidden，否则设置高度后内容仍会溢出显示。

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