jquery 克隆，指数创建
我当前正在创建一个应用程序，用户可以在其中将项目拖到邮箱中。
他们放下物品后，会在邮箱“后面”创建一个新图像，让您感觉邮箱实际上正在掉进去。
每次有人放下物品时，我都会使用以下代码创建新图像并为其设置动画：
function animateDrop(){
animateArray.push($('.animateDrop').clone())
xArray.push(xPos)
yArray.push(yPos)
var foo = animateArray[animateArray.length - 1];
var finalxPos = xArray[xArray.length - 1];
var finalyPos = yArray[yArray.length - 1];
$('body').append(foo);
foo.css({'left': finalxPos, 'top': finalyPos + 40}).fadeIn('slow');
foo.animate({'top': '+=100px'},1500);
};
animateDrop();
执行代码时创建了一个新图像，但删除更多项目会导致正在创建的 div 呈指数增长。
它会在某个地方记住所有先前创建的 div 并将它们再次附加到正文中（至少在我看来是这样）。
我目前陷入了阻止这种情况的方法中，任何帮助将不胜感激。
2011 年 10 月 24 日更新：animateArray.push($('.animateDrop').first().clone()) 将 .first() 添加到数组推送中解决了创建多个 div 的问题。
Im currently creating an application in which user's are able to drag items to a mailbox.
After they drop the item, a new image is created "behind" the mailbox, giving you the feeling it is actually falling in.
Im using the following code to create and animate new images everytime a person drops an item:
function animateDrop(){
animateArray.push($('.animateDrop').clone())
xArray.push(xPos)
yArray.push(yPos)
var foo = animateArray[animateArray.length - 1];
var finalxPos = xArray[xArray.length - 1];
var finalyPos = yArray[yArray.length - 1];
$('body').append(foo);
foo.css({'left': finalxPos, 'top': finalyPos + 40}).fadeIn('slow');
foo.animate({'top': '+=100px'},1500);
};
animateDrop();
When the code is executed the a new image is created, but dropping more items is causing an exponential growth in div's that are being created.
Somewhere its remembering all of the previously created divs and appends all of them again to the body (atleast that is what is looks like to me).
I am currently stuck on a way to prevent this, any help would be appreciated.
UPDATE 24-10-2011: animateArray.push($('.animateDrop').first().clone())
Adding the .first() to the array push solved the problem of creating multiple divs.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你的假设是正确的。您正在复制原件和已经复制的元素全部
再来一遍。使用不同的类标识符而不是 $(".animateDrop") 或从一旦您不想再复制时删除此类
可能有更好的方法来解决您的问题 - 您可以在拖放上使用回调函数
看一下这里：http://jqueryui.com/demos/draggable/
Your assumption is right. You are copying the original & the already copied elements all
over again. Use a different class identifier instead of $(".animateDrop") or remove this class from the once u don't want to copy anymore
There is maybe a better approach for your problem - you can use a callback function on the drag/droppables
Take a look here: http://jqueryui.com/demos/draggable/
只需在克隆调用之前使用 jQuery 的
first() 或 :first选择器即可。那应该可以解决问题。Just use jQuery's
first() or :firstselector before the cloning call. That should do the trick.