全班活动正在发生故障

Question

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

这是我的问题：，而每个div应该在它悬停时改变颜色，所有divs（当盘旋时）会导致同样的右下角div改变颜色，而不是自己。

我相信所有的事件都引用了className＆＃34; square＆＃34;下的最终div。 （右下方div）。 如何让每个事件引用自己的div？

快照

CODE

    //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);
    }

Answer 1

在没有其他任何内容引用mutate(dist = purrr::map2_dbl(models$a1, models$a2, sim1_dist)) 的情况下，在您的事件监听器中找到this.square是很奇怪的。也许您最初尝试this.square，但由于Wickham's book中描述的原因无效，然后尝试使用square.style.background进行修复，因为它是箭头功能，因此无效然后试图让this.style.background = 'white';工作......？

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

this

或更好，使用square.addEventListener('mouseenter', function () { this.style.background = 'white'; });声明变量 - 由于您使用的是箭头函数，因此必须可用 - 并参考let：

square

//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); } 和j的声明也遗失了。您应该启用JavaScript closure inside loops – simple practical example，不要使用i来避免这些类型的问题。