javascript - JS onclick 无法正确触发

Question

我有以下功能。问题在于，函数没有像预期的那样等待用户单击图像，而是立即为图像数组中的每个元素触发 imgReplace 函数。

我做错了什么吗？ 我正在使用基于 Jquery 的单独 Javascript 例程这一事实与此相关吗？

function setup () {
    var images = document.getElementById("mycarousel");
    images = images.getElementsByTagName("img");

    for (var i = 0; i< images.length; i++) {
        images[i].onclick = imgReplace (images[i]);
    }

}

Answer 1

哇，我刚刚在我自己的一些代码中修复了这个令人尴尬的错误。其他人都弄错了:

images[i].onclick = function() {imgReplace(images[i]);};

不会工作。相反，它应该是:

images[i].onclick = (function(i) { return function() { imgReplace(images[i]); }; })(i);

Paul Alexander 的回答是正确的，但你不能通过引入另一个这样的局部变量来解决问题。 JavaScript block (如“for”循环中的 {} block )不会创建新的作用域，这是与 Java 或 C++ 的重大(且非显而易见的)区别。只有函数才能创建作用域(抛开一些新的 ES5 特性)，所以这就是为什么上面介绍了另一个函数。循环中的“i”变量作为参数传递给匿名函数。 那个 函数返回实际 事件处理程序函数，但现在它引用的“i”将是外部函数作用域的不同参数。因此，每次循环迭代都会创建一个新的范围，专门用于“i”的单个值。