Javascript 类范围的事件发生故障

我用JavaScript创建了一个16x16的div网格。 每个div都有一个基于公共类继承的mouse-enter事件，该类应将其黑色背景更改为白色

这是我的问题：每个div悬停时都应该改变颜色，而所有div悬停时都会导致相同的右下div改变颜色，而不是它们自己

我相信所有的事件都引用了类名右下角div下的最后一个div。如何使每个事件引用自己的div

快照

代码

在事件侦听器中发现this.square是很奇怪的，而没有其他内容引用this.square。可能您最初尝试了square.style.background，但由于中所述的原因，它不起作用，然后尝试使用此.style.background='white'；，它不起作用，因为它是一个箭头函数，然后试图使这个。正方形起作用

无论如何，请使用非箭头函数，使其内部成为事件侦听器附加到的元素，而不是与外部相同：

---

我和j的声明也不见了。您应该启用并且永远不要使用var来避免这些类型的问题。

这是什么。square？您需要创建一个闭包，因为这将应用于循环的最终迭代。创建一个函数，传入该函数并更改背景there@SterlingArcher：这在所有循环迭代中都是相同的though@Ry︁ 是的，但是假设这是一个类引用，即使删除它，它也会被绑定到循环之外吗？@Ry@SterlingArcher我本来没有这个，同样的问题也存在：所有事件只影响右下角的div

    //GRID CREATION (30x30)
    var container = document.getElementById('container');
    var size = 30;

    //Row Creation (30)
    for(j=0; j < size; j++) {
        var row = document.createElement('div');
        row.classList.add("row");

        //Square Creation (30 per Row)
        for(i=0; i<size; i++) {
            var square = document.createElement('div')
            square.classList.add("square");

            //div background-color changes on mouse-enter   
            square.addEventListener('mouseenter', () => { 
                this.square.style.background = 'white';
            });

            row.appendChild(square);
        }
        container.append(row);
    }

square.addEventListener('mouseenter', function () { 
    this.style.background = 'white';
});

//GRID CREATION (30x30)
let container = document.getElementById('container');
let size = 30;

//Row Creation (30)
for (let j = 0; j < size; j++) {
    let row = document.createElement('div');
    row.classList.add("row");

    //Square Creation (30 per Row)
    for (let i = 0; i < size; i++) {
        let square = document.createElement('div');
        square.classList.add("square");

        //div background-color changes on mouse-enter   
        square.addEventListener('mouseenter', () => { 
            square.style.background = 'white';
        });

        row.appendChild(square);
    }
    container.append(row);
}