同class的16个div绑定onclick后，始终返回最后一个div的h2文本问题

这个问题我之前也碰到过，典型的闭包作用域陷阱导致的！先给你拆解下原因，再给几个实用的解决方案：

问题根源 #

你大概率是用了var声明循环变量，或者在循环里直接绑定事件时，没有保留当前迭代的元素上下文。举个例子，你可能写了类似这样的代码：

const divs = document.querySelectorAll('.your-class');
// 用var的话就会出问题！
for (var i = 0; i < divs.length; i++) {
  const h2Text = divs[i].querySelector('h2').textContent;
  divs[i].onclick = function() {
    console.log(h2Text); // 永远输出最后一个div的h2文本
  }
}

因为var是函数级作用域，循环结束后，i和h2Text都会保留最后一次循环的结果，所有点击事件触发时，访问的都是这个最终值，自然就只会返回最后一个div的内容了。

解决方案1：用let替代var（最简单的修改） #

把循环里的var换成let，利用let的块级作用域特性，每次循环都会创建独立的变量上下文：

const divs = document.querySelectorAll('.your-class');
for (let i = 0; i < divs.length; i++) {
  const h2Text = divs[i].querySelector('h2').textContent;
  divs[i].onclick = function() {
    console.log(h2Text); // 现在能正确返回当前点击div的h2文本
  }
}

解决方案2：用forEach遍历（更简洁） #

直接用querySelectorAll返回的NodeList的forEach方法，每次迭代都会生成独立的作用域，避免闭包陷阱：

document.querySelectorAll('.your-class').forEach(div => {
  const h2Text = div.querySelector('h2').textContent;
  div.onclick = () => {
    console.log(h2Text);
  }
});

解决方案3：事件委托（最优解，支持动态元素） #

如果你的div是动态生成的（比如后续通过JS添加），或者想优化性能，推荐用事件委托——只给父元素绑定一次事件，利用事件冒泡来处理：

// 替换成你这些div的实际父元素选择器
const parent = document.querySelector('.divs-parent');
parent.onclick = function(e) {
  // 找到点击事件真正触发的那个目标div
  const targetDiv = e.target.closest('.your-class');
  if (targetDiv) {
    // 获取对应h2的文本
    const h2Text = targetDiv.querySelector('h2').textContent;
    console.log(h2Text);
  }
}

这个方法的好处是：只需要一个事件监听，不管div是静态存在的还是后来动态添加的，都能正常触发，性能更优。

记得把代码里的.your-class和.divs-parent替换成你实际的类名哦！

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