使用數組作爲動態JQuery字符串變量名稱

Question

摘要：我已將ID選擇標記的名稱傳遞給數組。我想動態分配每個選擇項目，以便在更改時顯示所選項目的索引。這被髮送到輸出格。只有第三個選擇項被動態地觸發。爲什麼？

<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"。

一個解決辦法是緩存在您指定每個函數處理一個封閉的c的價值，但在這種情況下，更好的做法是簡單地使用this的處理程序中來指代由change針對性的select元素事件。

$(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關閉問題，我相信。分配給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);