jQuery - 被赋予随机 id 的动画对象

Question

我想知道如何为已分配随机 ID 的对象设置动画。

基本上我有一个在容器中创建“房子”的按钮。当我点击创建房子时，它会附加到我的容器中，带有一个随机 ID 和一个设置的 CLASS：

$('.Container').append('<div id="'+iRandomId+'" class="House" title="'+sName+'"></div>');

我得到的随机 ID 是这样的：

var iRandomId = GetRandomNumber(999999, 99999999999);
oObject.setId(iRandomId);

function GetRandomNumber(iMinNumber, iMaxNumber)
{
return  Math.floor(Math.random()* iMaxNumber +iMinNumber);      
}  

动画：我可以通过调用类轻松地为对象制作动画。但是如果我创建不止一个房子，它们当然都会有动画......

setTimeout(function(){
$('.House').effect('bounce');
}, 0, function(){

当另一个对象被拖到我的房子顶部时会触发动画（这是可放置的）。我的 jQuery 需要以某种方式检查对象被拖到的特定房屋的 ID。然后只为那个房子设置动画。

Answer 1

假设 jQuery UI 的 droppable 或类似的，它会触发一个 drop 事件，当放置发生时，this 作为可放置对象，因此在事件处理程序中：

$(this).effect('bounce');

Live Example | Live Source（以下内联引用）

如果这是您使用id 的唯一原因，您可以停止使用id。如果不是，那么您应该修复您的代码，这样就不可能以相同的id 结束两个元素（因为您的函数连续两次返回42 是完全合理的——而且是随机的） .最简单的方法是有一个起点，每次使用时递增一。

---

CSS：

.dropzone {
  width: 400px;
  height: 50px;
  border: 1px solid black;
}
.dragme {
  width: 20px;
  height: 20px;
  background-color: blue;
  margin: 2px;
  cursor: pointer;
}

HTML：

<p>Drag the blue squares into the rectangles, which
will turn yellow briefly on drop.</p>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dragme"></div>
<div class="dragme"></div>
<div class="dragme"></div>

JavaScript：

$(".dropzone").droppable({
  drop: function() {
    var $this = $(this);
    $this.css("background-color", "yellow");
    setTimeout(function() {
      $this.css("background-color", "");
    }, 500);
  }
});
$(".dragme").draggable();