Question

对不起，如果这看起来有点容易。我还是Javascript的新手。

我正在生成一个复选框列表。在复选框的 onClick 上，我想让它弹出相关的文字。即。名为“one”的复选框应显示“one”。在我的例子中，它只显示“两个”。

但是click（）回调方法只调用最后添加的复选框的文本。这里的'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

“这里的'v'变量是否按每个复选框分配？”

嗯，它被分配了，但没有为每个复选框声明。

在Javascript变量中只有函数范围。即使您尝试在循环的每次迭代中创建一个新变量，它也只是在函数级别声明的单个变量，由所有迭代共享。声明被提升到函数级别，只有赋值发生在循环内。

您可以使用立即执行的函数表达式在循环内创建另一个范围，您可以在其中为每次迭代创建一个新变量：

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]));
}

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

你可以做到

   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()之类的值

不确定我是否完全理解Javascript中的变量范围

3 个答案: