Javascript 将eventListener添加到具有相同类名但不同id的div会覆盖以前的eventListener

我在javascript文件的for循环中创建了一组div。它们具有相同的类名，但id不同

我通过for循环添加了一个事件侦听器，但是我以前的分配被覆盖，现在所有div都有完全相同的事件侦听器。当我点击它们时，它们都会做完全相同的事情

这是我的密码：

JS:

for（var i=1；i试试这种方法

for (var i = 1; i <= arraySize; ++i) {
    var childdiv = document.createElement('div');
    childdiv.className = 'small';
    childdiv.id = 'id' + i;
    //...
    //....

    var execCommand = parseFile(filesArray[i], "Exec");
    console.log(execCommand);
    childdiv.addEventListener('click', function(event) {
        exec(execCommand, function(error, stdout, stderr) {})
    })

    //TOOD: append element to DOM
    // document.body.append(childdiv);
}

用于（var i=1；i问题在于，使用
var
关键字声明的变量没有
块范围
。这意味着，尽管在每次循环迭代中声明
var execCommand
它们在整个函数/全局上下文中都被视为一个变量。因此，所有函数都作为
click
事件侦听器传递查看相同的
execCommand
变量。此变量的值等于在最后一次循环迭代中分配的值。这就是为什么当您单击
div
时会看到相同的结果

解决方案非常简单。将
execCommand
变量声明为
block scoped
。可以使用
let
或
const
关键字来完成

for (var i = 0; i < arraySize; i++) {
    var smalldiv = document.getElementById('id' + (i + 1));

    const execCommand = parseFile(filesArray[i], "Exec");
    console.log(execCommand);
    smalldiv.addEventListener('click', function(event) {
        exec(execCommand, function(error, stdout, stderr) {})
    })

}

您可以通过在
for
循环中使用
let i=0
来解决这个问题，或者您也可以像下面这样使用IIFE（如果不使用ES6）


const els=document.queryselectoral（'button'））
对于（变量i=0；i

按钮0
按钮1
按钮2
按钮3
for (var i = 0; i < arraySize; i++) {
    var smalldiv = document.getElementById('id' + (i + 1));

    const execCommand = parseFile(filesArray[i], "Exec");
    console.log(execCommand);
    smalldiv.addEventListener('click', function(event) {
        exec(execCommand, function(error, stdout, stderr) {})
    })

}

for (var i = 0; i < arraySize; i++) {
    var smalldiv = document.getElementById('id' + (i + 1));

    var execCommand = parseFile(filesArray[i], "Exec");
    console.log(execCommand);

    (function(execParam) {
        smalldiv.addEventListener('click', function(event) {
            exec(execParam, function(error, stdout, stderr) {})
        });
    })(execCommand);

}