Fatal编程技术网

Javascript 循环和闭合

javascript loops dom

Javascript 循环和闭合,javascript,loops,dom,closures,dom-events,Javascript,Loops,Dom,Closures,Dom Events,我有一些代码生成了一组按钮元素，并通过一些DOM函数将它们附加到正文中的div。它动态地为每个按钮的onclick事件设置一组匿名函数（事件处理程序） 这是通过从0迭代到20来执行的 问题是，我想在事件处理程序中使用循环计数器I，但是，作为循环中该迭代的值，而不是作为I获得的最终值。起初，我以为我可以通过闭包来实现这一点，但后来我意识到它并没有像我最初认为的那样执行i不断更改每次迭代，所有其他anon函数（通过闭包？）必须看到相同的i，因为它范围内的i都指向相同的值。因为当您触发onclick时

我有一些代码生成了一组
按钮
元素，并通过一些DOM函数将它们附加到
正文
中的
div
。它动态地为每个
按钮的
onclick
事件设置一组匿名函数（事件处理程序）

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

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

所以我想，我该如何着手解决这个问题呢？我尝试将
I
设置为另一个变量，以此类推，但结果都是一样的，因为新变量的值在每次迭代中都会更新，就像
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>



尝试使用如下的闭包：


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



var div=document.getElementById（“myDiv”）；

对于（var i=0；i可能是Yes的重复项），它将在每个循环中使用闭包。需要知道的关键是JavaScript局部变量的作用域是在函数级别。因此，如果您想为每个处理程序指定自己的“i”，您需要在另一个函数中实例化处理程序函数。关于这个问题，有很多很多StackOverflow问题。@Pointy这根本不是jQuery，您链接的问题对我来说是完全陌生的。无论您是否使用jQuery，都是同一个问题；毕竟jQuery只是JavaScript。

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