нажмите, чтобы контролировать

Question

count=1;
for(var i=0;i<5;i++){
   count++;
   $("#ImageProductLeft"+count.toString()).bind('click', function(){
           alert(i);                                                                                                                                    
   });
}

Я хочу, чтобы при нажатии на ImageProductLeft1 показать alert(1) и на ImageProductLeft2 показать alert(2) и ...

, но нажать на все `ImageProductLeft1 показать alert(5)

Answer 1

Это немного более элегантно и гибко:

$("div[id^='ImageProductLeft']").each(function(index) {
    $(this).click(function() {
        alert(index);
    });
});

Вы можете иметь столько элементов, начиная с ImageProductLeft, сколько захотите, и, щелкнув по любому, вы получите соответствующий индекс.

Тестовый кейс .

Answer 2

Вы создаете функцию в цикле (замыкания). Все переменные будут разделены между ними, а также i.

Когда функции в конечном итоге вызываются, цикл уже завершен, и i будет иметь значение 5.

JavaScript не имеет области видимости блока. Чтобы создать новую область видимости и зафиксировать значение переменных, вы вызываете функцию:

for(var i=0;i<5;i++){
   (function(x) {
       $("#ImageProductLeft"+count.toString()).bind('click', function(){
           alert(x);                                                                                                                                    
       });
   }(i));
}

Здесь мы используем непосредственную функцию для «захвата» значения i.

---

Тем не менее, поскольку вы используете jQuery, есть и другие, более элегантные методы для решения этой проблемы, как показано в и @ Shadow Wizard *1018* ответах *1017* @ scessor.

Тем не менее, важно знать , почему работает так и как это можно решить с помощью "чистого" JavaScript.

Затворы могут быть хитрыми. Предлагаю взглянуть на JavaScript-закрытия для чайников .

Answer 3

count=1;
for(var i=0;i<5;i++){
   count++;
   $("#ImageProductLeft"+count.toString()).bind('click', {i: i}, function(event){
         alert(event.data.i);
   });
}

Answer 4

У вас возникла эта проблема, потому что i в каждом из созданных вами обработчиков событий указывает на одно и то же место в памяти. Попробуйте использовать это:

count=1;
for(var i=0;i<5;i++){
   count++;

   $("#ImageProductLeft"+count.toString()).bind('click', 
       function(x){
           return function() { alert(x); };
       }(i)                                                                                                                                    
   });
}

Это довольно распространенная ошибка. См. эту страницу для дальнейшего объяснения

Answer 5

for (var i = 1; i<6; i++)
{
    $("#ImageProductLeft" + i.toString()).bind('click', function() {
        alert(i);
    });
}