jQuery - объект Animate, которому был присвоен случайный идентификатор

Question

jQuery - объект Animate, которому был присвоен случайный идентификатор

0

Я хочу знать, как я могу анимировать объект, которому я присвоил случайный идентификатор.

В основном у меня есть кнопка, которая создает "дом" в контейнере. И когда я нажимаю, чтобы создать дом, он будет прикрепляться к моему контейнеру со случайным идентификатором и набором CLASS:

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

Случайный идентификатор я получаю вот так:

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, так это проверить идентификатор конкретного дома, на который объект перетаскивается. А потом только оживите этот дом.

Adnaves 24 сен. 2013, в 18:21

Источник

Теги:

javascript

jquery

animation

random

1 ответ

Ещё вопросы

T.J. Crowder · Accepted Answer · 2013-09-24T15-00-00.000Z

Предполагая, что jQuery UI droppable или подобен, он запускает событие drop с this как droppable, когда происходит падение, поэтому внутри обработчика события:

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

Живой пример | 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();

И, таким образом, удалить это случайное поколение идентификаторов, что довольно уродливо.