Как в jQuery передать в метод-обработчик события переменную во время инициализации?

Question

[MAXH0]

Например.
Есть 10 одинаковых кнопок.
Мы получили их массив btn=$('button');
for (var i = 0; i < btn.length; i++) {
btn[i].click(function(event){
alert(i);
})
}

При щелчке получается 10, а надо 0,1,2,3...

Желательно получить не очень мозголомный код.

Answer 1

[Павел Китьян]

for (var i = 0; i < btn.length; i++) {
btn[i].click((function (i){return function(event){ alert(i);}})(i))
}

Comments

[Павел Китьян]

А для лучшей читаемости еще можно использовать перебирающие методы для массивов: forEach, map...

[MAXH0]

Помоему "Спасибо". Завтра проверю в своем коде, и если "ДА" -отмечу как ответ... Хотя скобки - почти как Лисп :)

[MAXH0]

Ошибка: SyntaxError: function statement requires a name

Исходный код:
btn[i].click((function (i){function(event){ alert(i);}})(i))

[Павел Китьян]

@MAXH0, суть в том, что для каждого обработчика создаётся замыкание, которое хранит i.

Уверяю, скорее всего более короткий способ от @iiil подойдет.
Просто посмотрите вот этот пример, чтобы избежать ошибки: jsfiddle.net/kityan/Z86at
Мы же не в курсе точно - есть ли еще у вас кнопки или нет.

[Павел Китьян]

@MAXH0, виноват. Забыл return перед вложенной функцией.
Вот: jsfiddle.net/kityan/B9Jva

Answer 2

[Юрий Лобанов]

jsfiddle.net/iiil/48Mat

используйте data-атрибуты
jsfiddle.net/iiil/48Mat/1
Обращаться можно потом по ним же button[data-num="3"] например.

Comments

[Павел Китьян]

Небольшая проблема может быть связана с тем, что при добавлении кнопок индексы начнут смещаться. Если не нужно фиксировать индексы - применимо. Если нужно - тогда можно воспользоваться .data() и установить для кнопок данные, к которым обращаться в click-обработчике.

[MAXH0]

нее... Мне не нужно посчитать кнопочки. Мне нужно чтобы соответствующей кнопочке по i можно было вызывать информацию из массива.

[Павел Китьян]

@MAXH0, оба варианта подходят

[Юрий Лобанов]

@MAXH0 используйте data-атрибуты, поправил ответ.

Answer 3

[Александр Хиренко]

Как раз Ваш случай описывается, почитайте и узнаете почему так происходит.
javascript.ru/basic/closure

Comments

[MAXH0]

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

Answer 4

[chigoe]

$("button").each(
			function(indx){
				$(this).click(
					function(){
						alert(indx);
					}
				);
			}
		);