在mouseover事件中引用变量时遇到麻烦
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在mouseover事件中引用变量时遇到麻烦相关的知识，希望对你有一定的参考价值。
我想创建一个事件，其中.gridss使用mouseover事件更改颜色。问题是gridss出来没有定义，如果我尝试将mouseover事件移动到gridss函数中它也不起作用。那么我怎样才能成功引用.gridds？
我的问题很简单，但我似乎无法做到正确，所以提前谢谢。
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);
答案
如果您使用jQuery，请使用jQuery进行事件。我假设你不知道mouseout或mouseleave，因为它看起来你正在使用setTimeout()来触发延迟文本颜色恢复原始颜色。我用过mouseenter and mouseleave which are similar to mouseover and mouseout events。
你有一个错误，没有定义gridss。移入和移出函数不起作用的原因是因为您使用gridss定义了let。
let的范围有限var范围是功能，只要你在函数中有gridss就可以工作。
Demo
const container = document.querySelector('#container');
$(document).ready(function() {
for (let y = 0; y < 32; y++) {
var gridss = $("<div class='gridss'>TEST</div>");
gridss.appendTo('#container');
}
$('.gridss').on('mouseenter mouseleave', function(e) {
if (e.type === 'mouseenter') {
this.style.color = "purple";
} else {
this.style.color = "white";
}
});
});#container {
border: 5px solid blue
}
.gridss {
border: 3px solid red;
height: 20px;
margin: 10px 5px;
text-align: center;
background: cyan;
font-weight: 900;
color: white;
transition: color .5s ease
}<div id='container'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>以上是关于在mouseover事件中引用变量时遇到麻烦的主要内容，如果未能解决你的问题，请参考以下文章
html5 画布中的基本 mouseover mouseout 事件对我不起作用