gpt4 book ai didi

javascript - 使用 jQuery 创建 eclipse 刻草图,绘制功能将无法与网格中的其他 div 一起使用

转载 作者:行者123 更新时间:2023-11-28 06:29:15 25 4
gpt4 key购买 nike

当我将鼠标悬停在我创建的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com