Question

我有一些代码会生成一堆button元素，并通过一些DOM函数将它们附加到div中的body。它会动态地将一堆匿名函数（事件处理程序）设置为每个onclick的{{1}} 事件。< / p>

这是通过从button迭代到0来执行的。

问题是，我想在事件处理程序中使用循环计数器20 - 但是，作为循环中迭代的值而不是最终值i达到。起初，我认为我可以通过关闭来做到这一点，但后来我意识到它没有执行我最初的想法。 i不断更改每次迭代，所有其他的anon函数（通过闭包？）必须看到相同的i，因为范围内的i都指向相同的值。因为当您触发i时，它们都会报告相同的值。

所以我想，我怎么能解决这个问题呢？我尝试将onclick设置为另一个变量，依此类推，但所有结果都相同，因为新变量的每次迭代都会更新其值i。我想我在这里缺少一些简单的东西。

我想了一些，下面的例子答案。基本上我需要将<!DOCTYPE html> <html> <head> <title>loop closure test</title> <script language="javascript" type="text/javascript"> window.onload = function() { var div = document.getElementById("myDiv"); for( var i = 0; i <= 20; i++ ) { var b = document.createElement("button"); b.setAttribute("type","button"); b.appendChild(document.createTextNode("Button" + i.toString())); b.onclick = function(event) { var date = new Date( 2012, 3, i ); alert( date.getMonth() + "/" + date.getDate() + "/" + date.getFullYear() ); } div.appendChild(document.createElement("br")); div.appendChild(b); } } </script> </head> <body> <div id="myDiv"></div> </body> </html>陷入另一个闭包中。我决定采用这条路线：

Answer 1

尝试使用这样的闭包：

var div = document.getElementById("myDiv");

for( var i = 0; i <= 20; i++ ) {
    var b = document.createElement("button");
    b.setAttribute("type","button");
    b.appendChild(document.createTextNode("Button" + i.toString()));
    b.onclick = function(pos) {
        return function(event) {
                var date = new Date( 2012, 3, pos );
                alert( date.getMonth() + "/" + date.getDate() + "/" + date.getFullYear() );
        }
    }(i);      
    div.appendChild(document.createElement("br"));
    div.appendChild(b);
}

循环和关闭

1 个答案: