배열을 동적 JQuery 문자열 변수 이름으로 사용

Question

요약 : id 선택 태그의 이름을 배열로 전달했습니다. 변경시 선택한 항목의 색인을 표시하도록 각 선택 항목을 동적으로 지정하려고합니다. 이것은 출력 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-loop의 끝에서 모든 요소는 적절한 이벤트 핸들러를 갖지만 함수 본문 내에서 동일한 c 변수를 참조합니다. 이 변수는 c의 마지막 값인 "c"을 보유합니다.

하나 개의 솔루션은 할당 모든 기능 핸들러에 대한 폐쇄에 c의 값을 캐시하는 것입니다 만,이 경우에는 단순히 change의 대상이 된 select 요소를 참조하는 핸들러 내부 this를 사용하는 것이 훨씬 낫다 행사. 또한

$(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의를 사용하지 않는, 각 select 요소의 하나 option:selected이 있어야합니다. 따라서 find을 사용하고 첫 번째로 선택한 option 만 사용하면됩니다.

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

Answer 2

좋은 javascript 폐쇄 문제, 나는 믿습니다. change 이벤트에 할당 한 함수는 변수 c를 참조하며 for 루프의 각 반복마다 변경되고 'c'로 끝납니다. 대신 함수에 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);