Проблема с областью действия и / или щелчком слушателя в Javascript / jquery

Question

Я пытаюсь решить тривиальную проблему:

var setListeners = function()
        {
            for(var i in sliders)
            {
                sliders[i].switchBtn.click(function()
                {
                    alert(i);
                });
            }
        }

В ползунках есть три элемента, поэтому 3 switchBtn получают прослушиватель щелчков. Я ожидал, что нажатие на первую кнопку приведет к появлению «0», второго «1» и третьего «2». Однако, когда я нажимаю каждую кнопку, я просто получаю «2».

Может ли кто-нибудь указать, почему значение i переопределяется для каждой новой функции прослушивателя?

Answer 1

Используйте замыкание, чтобы внутренний i не всегда был связан с внешней областью (которая будет последним значением в конце цикла).

Здесь значение i устанавливается на j.

var setListeners = function()
    {
        for(var i in sliders)
        {
            sliders[i].switchBtn.click((function(j)
            {
                return function() { alert(j) };
            })(i);
        }
    }

jsFiddle .

Answer 2

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

sliders[i].switchBtn.click((function(n){
   return function(){
      alert(n);
   }
})(i));

n (был я) теперь связан в закрытии, и ваши оповещения будут отображаться правильно.