Question

HTML

<body>
    <div id='test' onClick="load()">
       2
    </div>
</body>

的Javascript

load = function() {
  test.innerHTML = "";

    for (var i = 0; i < 5; i++) {

        var p = document.createElement("p");
        p.innerHTML = "Link";

        p.onclick = function () {
            alert("LINK NR: " + i)
        }

        document.getElementById('test').appendChild(p);

    }
}

在上面的代码中，为什么函数总是返回最后一个value？

Here is a fiddle代码。

Answer 1

只有在元素上触发“click”事件时才会调用p.onclick函数，然后i的值将为5，因为循环已经完成了那个时候。

您期望每次循环迭代都会执行函数语句 - 事实并非如此。如果确实执行了，那么对于每次迭代，您都会收到一条警告消息，无论是否点击了元素。

可以通过在函数外部和内部保持console.log来检查这一点，您会发现每次迭代时，函数外部的console.log语句将打印在浏览器的控制台中，但是{{1}函数内部的语句不会在循环的每次迭代中执行。

Answer 2

试试这个：

    (function(i){
        p.onclick = function () {
            alert("LINK NR: " + i)
        }
    })(i);

小提琴：http://jsfiddle.net/sFXep/2/

以下是解释：http://en.wikipedia.org/wiki/Immediately-invoked_function_expression

在这里：http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Answer 3

check this  fiddle  link i have made some small changes

http://jsfiddle.net/sFXep/8/

Answer 4

完成for语句后，本地变量i的值为5。
在所有已创建的事件处理程序中，i与for循环中的i的相同

动态设置Javascript函数

4 个答案: