$('#stuff_btn').on('click', function(event){
event.preventDefault();
$(this).remove();
$('#stuff').prepend('<div id="current_lvl">Level: 1</div>');
var words = ["arvuti","pudel","ekraan"];
var random = Math.floor(Math.random() * words.length);
var word = words[random];
var chars = word.split('');
chars = _.shuffle(chars);
for(var i in chars)
{
$('#word_place_grid ul').append('<li id="letter' + i + '">' + chars[i] + '</li>');
$('#letter'+i).bind('click',function(){
$(this).animate({
opacity: 0.30,
top: -55,
},750,function(){ //Animation complete
$('#game_window_grid ul').append('<li>' + chars[i] + '</li>');
$(this).remove();
});
});
}
})
HTML:
<div class="word_grid" id="game_window_grid">
<ul>
</ul>
</div>
<div class="word_grid" id="word_place_grid">
<ul>
</ul>
</div>
Поэтому я стараюсь взять слово из списка случайно. Перемешайте буквы. Поместите каждую букву в отдельный li в diС#word_place_grid. Затем я хочу добавить обработчик кликов в каждый div, который будет анимировать этот li, и в конце анимации я хотел бы добавить значение анимированного li в новый элемент li, который я добавляю к div #game_window_grid. Проблема в том, что с кодом jQuery, который у меня есть сейчас, он добавит последний случайный символ из списка: chars ко всем элементам li, которые я добавляю в div #game_window_grid. Независимо от того, каким способом я пытаюсь переписать код, я все еще не могу получить правильное значение для li.
Любая идея, что я должен изменить или что мне делать, чтобы получить правильное значение для div #game_window_grid li?
заранее спасибо
Вытащите это...
$('#letter'+i).bind('click',function(){
$(this).animate({
opacity: 0.30,
top: -55,
},750,function(){ //Animation complete
$('#game_window_grid ul').append('<li>' + chars[i] + '</li>');
$(this).remove();
});
});
Поместите это где-то еще...
$('#word_place_grid').on('click', '[id^=letter]', function(){
var character = $(this).text();
$(this).animate({
opacity: 0.30,
top: -55,
},750,function(){ //Animation complete
$('#game_window_grid ul').append('<li>' + character + '</li>');
$(this).remove();
});
});
Изменение: альтернативно вы можете избавиться от цикла for... in и заменить на $.each()
как ваш итератор
$.each(chars, function(i, character) {
$('#word_place_grid ul').append('<li id="letter' + i + '">' + character + '</li>');
$('#letter'+i).on('click',function(){
$(this).animate({
opacity: 0.30,
top: -55,
},750,function(){ //Animation complete
$('#game_window_grid ul').append('<li>' + character + '</li>');
$(this).remove();
});
});
});
PS .bind()
не так широко используется, как в jQuery 1.7 .on()
содержит те же функциональные возможности с добавленным преимуществом делегированных событий, которые могут возникнуть после загрузки страницы (таким образом мой оригинальный ответ работает, чтобы найти динамически добавленный элементы [id^=letter]
.bind()
значениеi
всегда является последним индексом вашего массиваchars
. Некоторые говорят, что вы не должны использовать for ... in для массивов , я бы предложил использовать$.each()
для его замены (см. Мое редактирование выше). Первое решение, которое я предоставил, не используетi
, оно читает.text()
, чтобы найти значение символа (которое не содержится в цикле for ... in), так что в этом случае это не проблема.