javascript - 使用 Jquery 更改悬停时的单位背景颜色

Question

我试图在 jquery 创建的 div 表中获取一个单元格，当我将鼠标悬停在该单元格上时更改颜色，并在鼠标离开该单元格时保持该颜色。

我尝试添加 .hover 命令，但是当我添加它时，整个网格消失了。

这是我在 JSfiddle 的代码:https://jsfiddle.net/davidtaylorjr/eemLsjg7/8/

$(document).ready(function() {
  $(function() {
    for (var x = 0; x < 16; x++) {
      for (var y = 0; y < 16; y++) {
        $("<div>").addClass("unit").appendTo('#container');
      }
    }
  });
  
  $(".unit").hover() {
    $(this).css("background-color", "black");
  });
});

#container {
  background-color: lightblue;
  height: 192px;
  width: 192px;
}
.unit {
  background-color: white;
  height: 10px;
  width: 10px;
  margin: 1px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

Answer 1

除了两个语法问题之外，您的逻辑是正确的。首先，您需要为 hover() 提供一个函数，以便在 mouseenter 和 mouseleave 事件触发时执行。其次，您有嵌套的 document.ready 处理程序，您应该将其解开。修复了这些问题后，它就可以正常工作了。

但请注意，您可以进行一些调整来改进逻辑。首先，当您在所有迭代中附加相同的 HTML 时，嵌套循环是多余的。您可以将其设为单个循环。其次，最好将所有样式保留在 CSS 中，这样您就可以简单地使用 addClass() 来更改背景颜色。最后，hover() 创建了两个事件，其中您的代码不需要 mouseleave，因此您只需使用 mouseenter 即可使其更有效率。

话虽如此，试试这个:

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

  $(".unit").mouseenter(function() {
    $(this).addClass('black');
  });
});

#container {
  background-color: lightblue;
  height: 192px;
  width: 192px;
}
.unit {
  background-color: white;
  height: 10px;
  width: 10px;
  margin: 1px;
  float: left;
}
.unit.black {
  background-color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

另请注意，您可以完全删除循环并使用数组的 fill() 方法来创建 .unit 元素:

var arr = new Array(256);
arr.fill('<div class="unit"></div>');
$('#container').html(arr.join(''));

请注意，尽管 MDN 上提供了一个 polyfill，但 IE 和 Safari 不支持此功能。