当尝试在函数中显示/隐藏时，foreach循环中的div #id仅选择最后一个变量

这个问题涉及到JavaScript中的闭包和作用域的概念。当你在foreach循环中为每个div元素绑定事件处理函数时，由于JavaScript的作用域规则，循环结束后，所有的事件处理函数都会引用循环中的最后一个变量。这就是为什么只有最后一个div的显示/隐藏功能正常工作的原因。

基础概念

1. 闭包：闭包是指能够访问自由变量的函数。
2. 作用域：作用域定义了变量的可见性和生命周期。

解决方案

为了解决这个问题，你需要确保每个事件处理函数都有自己的作用域，这样它们就不会共享同一个变量。可以通过立即执行函数表达式（IIFE）或者使用let关键字来实现。

使用立即执行函数表达式（IIFE）

divs.forEach(function(div, index) {
    (function(index) {
        div.addEventListener('click', function() {
            document.getElementById('id' + index).style.display = 'none'; // 或者 'block'
        });
    })(index);
});

使用let关键字

for (let i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', function() {
        document.getElementById('id' + i).style.display = 'none'; // 或者 'block'
    });
}

优势

• 立即执行函数表达式（IIFE）：创建了一个新的作用域，使得每个事件处理函数都有自己的变量副本。
• let关键字：在每次迭代中都会创建一个新的绑定，因此每个循环迭代都有自己的i。

应用场景

这种技术在需要为循环中的每个元素绑定事件处理函数时非常有用，特别是在处理DOM操作和事件监听时。

示例代码

假设你有一组div元素，每个都有一个唯一的ID，你想在点击时隐藏或显示它们。

<div id="id0">Div 0</div>
<div id="id1">Div 1</div>
<div id="id2">Div 2</div>
<!-- 更多的 div -->

使用上述任一方法，你可以确保点击任何一个div时，只有对应的那个div会被隐藏或显示。

通过这种方式，你可以避免因为作用域问题导致的错误，并且能够正确地为每个元素绑定事件处理函数。