2013-04-07 5 views
8

Я попытался создать цикл с for и приращением событием onclick, но он не работает.onClick event в цикле for

Часть ЯШ:

var gameCase = ['', '', '', '', '', '', '', '', ''], // 9 
    itemLists = $('game').getElementsByTagName('li'); // 9 items 

    for(var i = 0; i < itemLists.length; i++) { 
     // i already egal to 9 
     itemLists[i].onclick = function() { 
       // do something 
     } 
    } 

Но в этом случае цикл уже закончен, прежде чем я смог нажать на элемент списка.

Кроме того, я хотел бы получить список элементов, которые я нажал, и сохранить их на массиве. Я попробовал gameCase [this] (в функции onclick), но я не знаю, хорошо ли это.

+0

Что '$ ('игра') getElementsByTagName ('LI');', Вы можете использовать JQuery или Чистый JavaScript здесь? – Eli

+0

@ user1479606 Чистый javascript, я просто создал свой собственный селектор. – jbr

ответ

15

Резиг охватывает эту тему очень хорошо "Секреты JavaScript Ninja" (http://ejohn.org/apps/learn/#59)

Вам нужно создать временную область, чтобы сохранить I, значение

for (var i = 0; i < itemLists.length; i++) (function(i){ 
    itemLists[i].onclick = function() { 
     // do something 
    } 
})(i); 

Edit:

var gameCase = ['', '', '', '', '', '', '', '', ''], // 9 
$listParent = $('game').find('ul'), // li's parent 
itemLists = $('game').getElementsByTagName('li'); // 9 items 

var listHandler = (function() { 
    var i = 0; 

    return function() { 
    // $(this) will in here refer to the clicked li 
    i++ // increment i 

    if (i === 9) { 
     $listParent.off('click', 'li', listHandler); //remove eventhandler when i reaches 9 
    } 
    } 
}()); 

$listParent.on('click', 'li', listHandler); // attach eventhandler to ul element 

Это должно делать то, что вы хотите, не можете проверить его прямо сейчас, так как я на работе.

+0

Как @Tim van Elsloo сказать, это хороший способ. Но есть что-то странное, когда я console.log значение i, прежде чем я нажимаю на какие-либо элементы моего списка, значение i уменьшается. 'for (var i = 0; i jbr

+0

Свойство length начинается с 1 и вашего i var от 0. Таким образом, вы либо имеете для изменения цикла for для начала с 1 и завершения по длине + 1 или изменения внутри функции в itemLists [i + 1] .onclick. – ruuska

+0

Да, я знаю, это не проблема. Интерес к Loop, когда я равен 9, я больше ничего не могу сделать. Но прямо здесь цикл For уже завершен, прежде чем нажимать на элемент. Я хотел бы, когда я нажимаю на элемент моего списка, я увеличиваю его, и когда я дойду до 9, цикл прекратится. – jbr

2

Оберните слушателя:

onclick = (function(i) {return function() { 
    ... 
};})(i); 

Это исправляет ваши переменные проблемы области видимости.

+0

Это неплохо, когда я привязался к элементу списка, он возвращает хороший номер дела. Но все в порядке, что инкремент цикла For до того, как я начну нажимать? – jbr

1

Извините, если я не понял ваш вопрос правильно, Из кода я понимаю, что вы пытаетесь добавить обработчик onclick ко всем элементам списка, найденным в теге игры (возможно, это должен быть класс/id).

Цикл for будет выполняться, когда тег/файл сценария загружается без какого-либо взаимодействия с пользователем.

Если вы хотите назначить функцию, использующую текущее значение счетчика. Используйте следующий код:.

itemLists[i].onclick = (function() { 
    return function() { 
     // TODO --- 
     // Your handler code here 
} 
})();