不確定我很理解Javascript中的變量範圍

Question

對不起，如果這看起來有點容易。我還是比較新的Javascript。

我正在生成複選框列表。在onClick的複選框，我想讓它彈出其相關的文本。即。名爲「one」的複選框應顯示「one」。在我的例子中，它只顯示「兩個」。

但是，click（）回調方法只調用最後一次添加的複選框的文本。這裏的'v'變量沒有被分配到每個複選框嗎？看起來'v'的行爲像一個全局變量。

this.view = document.createElement("div"); 

var tbody = document.createElement("tbody"); 
var popupValues = {"A", "B"}; 
for (var i=0;i<this.popupValues.length;i++) { 
    var v = popupValues[i]; 

    var tr = document.createElement('tr'); 
    var tdCheck = document.createElement('td'); 

    var ChkBx = document.createElement('input') 

    ChkBx.type = 'checkbox'; 

    tdCheck.appendChild(ChkBx); 

    var self = this; 

    $(ChkBx).live('change', function(){ 
     if($(this).is(':checked')){ 

      alert('checked' + v); 
     } else { 
      alert('un-checked' + v); 
     } 
    }); 


    var td = document.createElement("td"); 


    td.appendChild(document.createTextNode('' + v)); 
    tr.appendChild(tdCheck); 
    tr.appendChild(td); 


    tbody.appendChild(tr); 
} 

table.appendChild(tbody); 

document.appendChild(table) 

這裏的jsfiddle： http://jsfiddle.net/n5GZW/2/

任何人都知道我做錯了嗎？

更新：更新的jsfiddle

Answer 1

你可以做

var table = document.createElement("table"); 
var tbody = document.createElement("tbody"); 


var popupValues = [ 
    "one", "two" 
]; 

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

    var v = popupValues[i]; 

    var tr = document.createElement('tr'); 
    var tdCheck = document.createElement('td'); 

    var ChkBx = document.createElement('input'); 
    ChkBx.type = 'checkbox'; 
    ChkBx.value=v; 
    tdCheck.appendChild(ChkBx); 

    var td = document.createElement("td"); 
    td.appendChild(document.createTextNode('' + v)); 
    tr.appendChild(tdCheck); 
    tr.appendChild(td); 
    tbody.appendChild(tr); 


    var self = this; 

    $(ChkBx).click('change', function() { 
     if ($(this).is(':checked')) { 
      alert('check ' + $(this).val()); 
     } else { 
      alert('un-checked'); 
     } 
    }); 

} 

table.appendChild(tbody); 
document.body.appendChild(table)  

http://jsfiddle.net/n5GZW/4/
添加ChkBx.value=v;上點擊得到像$(this).val()值

Answer 2

你可能已經在尋找爲SO event binding in for loop。

這裏是一個解決方案：

試試這個：

this.view = document.createElement("div"); 

var tbody = document.createElement("tbody"); 
var popupValues = {"A", "B"}; 
for (var i=0;i<this.popupValues.length;i++) { 
    var v = popupValues[i]; 

    var tr = document.createElement('tr'); 
    var tdCheck = document.createElement('td'); 

    var ChkBx = document.createElement('input') 

    ChkBx.type = 'checkbox'; 

    tdCheck.appendChild(ChkBx); 

    var self = this; 

    (function(val) { 
     $(ChkBx).on('change', function(){ 
     if($(this).is(':checked')){ 

      alert('checked' + val); 
     } else { 
      alert('un-checked' + val); 
     } 
     }); 
    })(v); 


    var td = document.createElement("td"); 


    td.appendChild(document.createTextNode('' + v)); 
    tr.appendChild(tdCheck); 
    tr.appendChild(td); 


    tbody.appendChild(tr); 
} 

table.appendChild(tbody); 

document.appendChild(table); 

Answer 3

「這裏的'v'變量是否被賦值爲每個複選框？」

那麼，它的分配，但沒有爲每個複選框聲明。

在Javascript變量中只有函數範圍。即使您嘗試在循環的每次迭代中創建一個新變量，它也只是在函數級別聲明的一個變量，由所有迭代共享。聲明被提升到功能級別，只有分配發生在循環內部。

您可以使用immediatey執行函數表達式創建另一個範圍的循環，在那裏你可以爲每個迭代創建一個新的變量中：

for (var i=0;i<this.popupValues.length;i++) { 
    (function(v){ 
    // code of the loop goes in here 
    // v is a new variable for each iteration 
    }(popupValues[i])); 
}