-2

Sorry if this seems a bit easy. I'm still relatively new to Javascript.

I am generating a list of checkboxes. On the onClick of a checkbox, i want to make it pop up its associated text. ie. Checkbox named "one" should then display "one". In my example it only displays "two".

However the click() callback method only ever calls the text of the last added checkbox. Does the 'v' variable in here not get assigned per checkbox? It seems like the'v' is behaving like a global variable.

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)

Here is jsfiddle : http://jsfiddle.net/n5GZW/2/

Anyone know what I am doing wrong?

UPDATE: updated JSFiddle

4

3 回答 3

3

“这里的'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]));
}
于 2013-07-04T14:43:37.540 回答
2

You could've searched in SO for event binding in for loop.

Here is one solution:

Try this:

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);
于 2013-07-04T14:37:11.170 回答
2

你可以做 

   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()点击时的价值

于 2013-07-04T14:41:18.523 回答