Javascript 鼠标悬停事件中引用变量时出现问题

我想制作一个事件，其中.gridss使用鼠标悬停事件更改颜色。问题是gridss并没有定义，如果我尝试将mouseover事件移动到gridss函数中，它也不起作用。那么我如何才能成功地引用.grids呢

我的问题很简单，但我似乎不能得到它的权利，所以提前感谢

const container = document.querySelector('#container');

$(document).ready(function() {
    for(var x = 0; x < 16; x++) {
        for(var y = 0; y < 16; y++) {
            let gridss = $("<div class='gridss'></div>");
            gridss.appendTo('#container');
        }
    }
});

gridss.addEventListener("mouseover", function( event ){
  event.target.style.color = "purple";

  setTimeout(function(){
    event.target.style.color = "";
  }, 10);
}, false);

const container=document.querySelector（“#container”）；
$（文档）.ready（函数（）{
对于（变量x=0；x<16；x++）{
对于（变量y=0；y<16；y++）{
设gridss=$（“”）；
gridss.appendTo（“#container”）；
}
}
});
addEventListener（“鼠标悬停”，函数（事件）{
event.target.style.color=“紫色”；
setTimeout（函数（）{
event.target.style.color=“”；
}, 10);
}，假）；

如果您正在使用jQuery，请将jQuery用于事件。我假设您没有意识到

mouseout

或

mouseleave

，因为您似乎正在使用

setTimeout（）

触发文本颜色恢复原始颜色的延迟。我用过

您有一个未定义的

gridss

错误。移入和移出函数不起作用的原因是您使用

let

定义了

gridss

• let

  仅限于块的范围

• var

  scope是只要函数中有

  gridss

  就可以工作的函数

演示

const container=document.querySelector（“#container”）；
$（文档）.ready（函数（）{
for（设y=0；y<32；y++）{
var gridss=$（“测试”）；
gridss.appendTo（“#container”）；
}
$（'.gridss'）.on（'mouseenter mouseleave'，函数（e）{
如果（e.type==='mouseenter'）{
this.style.color=“紫色”；
}否则{
this.style.color=“白色”；
}
});
});
#容器{
边框：5px纯蓝
}
gridss先生{
边框：3倍纯红；
高度：20px；
利润率：10px 5px；
文本对齐：居中；
背景：青色；
字号：900；
颜色：白色；
过渡：颜色。5s轻松
}

超时的原因是什么？你想让文本恢复到初始颜色吗？哦，好吧，这是有道理的，但是现在事件（第12行）显示为未定义，为什么？你在使用Firefox吗？我使用的是Chrome，没有发现任何错误。请参阅“更新”，它可能会回答您的问题，为什么要将2用于's？@CataJohn OP的代码它效率不高，但这不是问题所在。@zer00ne好的，对。不管怎样，你的解决方案对我有效。