当鼠标指针进入元素时，更改div随机数的位置
[英]changing the position of random number of divs when the mouse pointer enters the element
问题描述
I do not know how to create div in a loop in jquery, and also how to change the position of them using "mouseover" function. 
我不知道如何在jquery的循环中创建div，以及如何使用“ mouseover”功能更改它们的位置。 this is my code that creates div elements but the position of the elements did not change. 这是我创建div元素的代码，但是元素的位置没有改变。 Can anyone help me to correct my code? 谁能帮助我更正我的代码？
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>
1 个解决方案
解决方案1
0 已采纳 2019-01-11 11:33:21
you need to use div object itself instead of "#"+div.id the reason is this id works when element is loaded in DOM, while thats not true in case you as you are generating div dynamically. 您需要使用div对象本身而不是"#"+div.id ，原因是当在DOM中加载元素时，此id可以工作，而当您动态生成div时，事实并非如此。
$(div).mouseover(function(){
$(this).animate({
top: generateRandomNumber(500) + "px",
left:generateRandomNumber(1000)
},500,"linear");
});
Check fiddle https://jsfiddle.net/stdeepak22/t5w6cm9x/ 检查小提琴https://jsfiddle.net/stdeepak22/t5w6cm9x/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.