Использование массива в качестве динамического имени переменной JQuery Имя переменной

Question

Реферат: Я передал имя тега выбора идентификатора в массив. Я хочу динамически назначать каждый элемент выбора для отображения Индекса выбранного элемента при изменении. Это отправляется на выходной div. Только третий элемент выбора динамически запускается. Зачем?

<script language="JavaScript" type="text/javascript"> 

$(document).ready(function(){ 

var NameOfSelect=new Array("a","b","c"); 

for (i=0;i<NameOfSelect.length;i++){ 

var sel=NameOfSelect[i]; 
$("#"+NameOfSelect[i]).change(function() { 
      var str = ""; 
      $("#"+sel+" option:selected").each(function() { 
      str += $(this).index() + " "+$("#"+sel).attr("id"); 
        }); 
      $("#output").text(str); 
     }) 
     .trigger('change'); 

} 
</script> 

HTML,

<select id="a" > 
<option value="0a" >0a</option> 
<option value="1a" >1a</option> 
<option value="2a" >2a</option> 

</select> 


<select id="b" > 
<option value="0b" >0b</option> 
<option value="1b" >1b</option> 
<option value="2b" >2b</option> 
</select> 

<select id="c" > 
<option value="0c" >0c</option> 
<option value="1c" >1c</option> 
<option value="2c" >2c</option> 

</select> 
<div id=output></div> 

Выходные данные показывают, что только "C", в настоящее время срабатывает на изменение. Почему «a» и «b» не так динамически назначаются?

Answer 1

Это происходит потому, что переменная c получает переназначение с каждой итерацией. В конце цикла for все элементы будут иметь надлежащий обработчик событий, но они будут ссылаться на ту же переменную внутри своего тела функции. Эта переменная будет содержать последнее значение c, являющееся "c".

Одним из решений будут кэшировать значение c в затворе для каждой функции обработчика присвоенного, но в данном случае это гораздо лучше просто использовать this внутри обработчика для обозначения select элемента, который был нацелен на change мероприятие.

$(document).ready(function(){ 
    var NameOfSelect = ["a", "b", "c"]; 

    for (var i=0; i < NameOfSelect.length; i++) { 
     $("#"+NameOfSelect[i]).change(function() { 
      // this refers to the targeted select element 
      var select = this; 
      var str = ""; 
      $("option:selected", this).each(function() { 
       // this refers to the selected option 
       str += $(this).index() + " " + $(select).attr("id"); 
      }); 
      $("#output").text(str); 
     }).trigger("change"); 
    } 
}); 

Кроме того, если вы не используете select S с несколькими выбор, должен быть только один option:selected для каждого select элемента. Поэтому вы можете просто использовать find и работать с первым (и только) выбранным option.

var str = $("option:selected", this).index() + " " + $(this).attr("id"); 
$("#output").text(str); 

Answer 2

Хорошая проблема с закрытием Javascript, я считаю. Функция, назначенная событию изменения, ссылается на переменную c, которая изменяется для каждой итерации цикла for и заканчивается как «c». Вместо этого перейдите в функцию:

var c= NameOfSelect[i]; 
(function (n) { 
    $("#"+NameOfSelect[i]).change(function() { 
     var str = ""; 
     $("#"+n+" option:selected").each(function() { 
      str += $(this).index() + " "+$("#"+n).attr("id"); 
     }); 

     $("#output").text(str); 
    }).trigger('change') 
})(c);