我不知道如何在 jquery 中循环创建 div，也不知道如何使用“鼠标悬停”功能更改它们的位置。这是我创建 div 元素的代码，但元素的位置没有改变。谁能帮我更正我的代码？
var r, g, b, counter, i;
//generate random number between 20 and number.
function generateRandomNumber(number) {
return Math.floor(Math.random() * (number - 20)) + 20;
}
// maximum number of random elements is 30.
counter = generateRandomNumber(30);
for (i = 0; i < counter; i++) {
var div = $("<div/>");
div.id = "randomlyPlaced" + i;
//random style for the elements
r = generateRandomNumber(255);
g = generateRandomNumber(255);
b = generateRandomNumber(255);
$(div).css({
position: "absolute",
background: "rgb(" + r + "," + g + "," + b + ")",
height: generateRandomNumber(200) + "px",
width: generateRandomNumber(400) + "px",
top: generateRandomNumber(500) + "px",
left: generateRandomNumber(1000) + "px"
});
//append the elements to body.
$('body').append(div);
//change the position of the element.
$("#" + div.id).mouseover(function() {
$(this).animate({
top: generateRandomNumber(500) + "px",
left: generateRandomNumber(1000)
}, 500, "linear");
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Randomly Placed Animated rectangles</title>
</head>
<body style="width: 80%; height: 80%; background-color :rgb(164, 173,
226); position:relative;">
<div id='+div.id+'></div>
</body>
</html>最佳答案
您需要使用 div 对象本身而不是 "#"+div.id 原因是当元素加载到 DOM 中时此 id 有效，但事实并非如此如果您动态生成 div。
$(div).mouseover(function(){
$(this).animate({
top: generateRandomNumber(500) + "px",
left:generateRandomNumber(1000)
},500,"linear");
});
关于javascript - 当鼠标指针进入元素时改变随机数的div的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54145545/