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

Question

我想创建一个事件，其中 .gridss 通过鼠标悬停事件改变颜色。问题是 gridss 未定义，如果我尝试将鼠标悬停事件移动到 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);

Answer 1

如果您使用 jQuery，请将 jQuery 用于事件。我假设您不知道 mouseout 或 mouseleave 因为看起来您正在使用 setTimeout() 来触发文本颜色恢复的延迟回到原来的颜色。我用了 mouseenter and mouseleave which are similar to mouseover and mouseout events .

您有一个错误，未定义 gridss。移入和移出函数不起作用的原因是因为您使用 let 定义了 gridss。

• let 限制在 block 的范围内

• var scope 是一个函数，只要你在函数中有 gridss 就可以工作。

演示

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>