我试图在 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>
最佳答案
除了两个语法问题之外,您的逻辑是正确的。首先,您需要为 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 不支持此功能。
关于javascript - 使用 Jquery 更改悬停时的单位背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41045470/