javascript - 添加 onclick 到输入

Question

我一直在尝试为通过 JS 创建的一组复选框添加 onclick 事件，但它没有达到我的预期。

在脚本末尾，在“checkboxes”div 中构建复选框后，我希望每个框都使用不同的参数 i 调用处理程序。看来处理程序都在使用 i 的当前值，实际上是从使用它的位置开始递增的。

我在这里缺少什么？？？

    function initialize() {
        console.log("enter initialize");
        console.log("create checkboxes");
        for ( i=0; i<4; i++){

            var span1 = document.createElement('span');
            span1.innerHTML = i;

            var cb = document.createElement('input');
            cb.type = "checkbox";
            cb.name = i.toString();
            cb.onclick = function(){myFunction(i);}
            console.log(i, cb.name, cb.onclick);

            var checkboxes = document.getElementById("checkboxes");
            checkboxes.appendChild(span1);
            checkboxes.appendChild(cb);
            console.log("cb="+cb.toString());       
        }
    }
    function myFunction(b){
        alert(b);

Answer 1

这是人们经常遇到的范围问题。问题是，创建函数时的“i”值与调用该函数时设置的“i”值不同，因此每次调用该函数时的“i”值始终为 3。

解决这个问题的最简单方法是简单地从元素的“this”中获取值，例如:

cb.onclick = function(){myFunction(this.name);}

如果你不希望它是字符串名称，只需提前设置它，如下所示:

cb.counter = i;
cb.onclick = function(){myFunction(this.counter);}