当我将鼠标悬停在我创建的 div 上时，只有左上角的 div 会受到 addClass() 方法的影响。当我将鼠标悬停在它们上面时，所有其他 div 保持不变。这是为什么？这是 html:
<DOCTYPE html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="JS/jquery-1.12.0.js"></script>
<script type="text/javascript" src="JS/etch.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
这是CSS:
#wrapper {
width: 1000px;
height: 760px;
}
#grid {
width: 250px;
height: 185px;
float: left;
}
.draw {
background-color: black;
}
这是我的 .js 文件:
var count = 0;
$(document).ready(function() {
while(count < 16){
$('#wrapper').append('<div id="grid">*</div>');
count++
}
$("#grid").on({
mouseenter: function () {
$(this).addClass('draw');
},
mouseleave: function () {
$(this).addClass('draw');
}
});
});
最佳答案
ID 必须是唯一的，您正在创建具有相同 ID 的所有 div。
尝试更改对此的附加
$('#wrapper').append('<div id="grid-"'+ count +'" class="grid">*</div>');
然后在 CSS 和其他 JS 中使用类选择器 .grid 定位网格元素
关于javascript - 使用 jQuery 创建 eclipse 刻草图，绘制功能将无法与网格中的其他 div 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35089053/