Нельзя использовать переменную внутри события click?

Question

У меня есть этот код, и это JavaScript и JQuery:

for (thisLooper = 1; thisLooper < 4; thisLooper++) { 

    if ($("#writeComments"+thisLooper).length > 0) { 
     $("#writeComments"+thisLooper+",#comments"+thisLooper+", #infoSpan"+thisLooper+"").hide(); 
     $("#toggleCommentForm"+thisLooper).click(function() { 
      $("#writeComments+thisLooper").slideToggle(); 
     }); 
    } 

} 

Что он делает:

1. Проверьте # writeComments1 существует
2. Если он существует, скрыть # writeComments1, # Комментарии1 и # infoSpan1
3. Затем, если кто-то нажимает на # toggleCommentForm1, slideToggle # writeComments1
4. Сделайте все это для # writeComments2 и его друзей
5. ли все это # ​​writeComments3 и это друзья

С выше ничего кода происходит, но если я заменить:

$("#toggleCommentForm"+thisLooper).click(function() { 
    $("#writeComments+thisLooper").slideToggle(); 
}); 

ширина это:

$("#toggleCommentForm"+thisLooper).click(function() { 
    $("#writeComments1").slideToggle(); 
}); 

Это все работает, но естественно, только # writeComments1 slideToggles, даже если я нажимаю # toggleCommentForm2, например.

Мой вопрос в том, почему я не могу использовать переменную «thisLooper» внутри событий click?

Answer 1

Закрытие в цикле будет исправлять непосредственную проблему (и, конечно, поместить переменную за пределы строки), чтобы значение индекса сохранялось в функции обратного вызова click.

for (index = 1; index < 4; index++) { 
    (function(thisLooper){ 
     if ($("#writeComments"+thisLooper).length > 0) { 
      $("#writeComments"+thisLooper+",#comments"+thisLooper+", #infoSpan"+thisLooper+"").hide(); 
      $("#toggleCommentForm"+thisLooper).click(function() { 
       $("#writeComments"+thisLooper).slideToggle(); 
      }); 
     } 
    })(index); 

} 

Вы должны также создать локальный var, а не держать повторно запрашивая выбор, но мне нужно, чтобы увидеть свой полный HTML первый (как код немного странно)

Answer 2

Проблема заключается в том, что ваш цикл переменная неправильно закрыта; вместо того, чтобы использовать замыкание, чтобы решить эту проблему (что объясняет TrueBlueAussie в своем ответе), вы можете также рассмотреть вопрос о связывании обработчика щелчка к элементу, который вы хотите выполнить скользят по:

$("#toggleCommentForm"+thisLooper).click($.proxy(function() { 
    // this is a jQuery object 
    this.slideToggle(); 
}, $("#writeComments"+thisLooper)); 

Примечания, хотя, что все более сложное, чем просто работающее на одном объекте jQuery, лучше разрешается закрытием.