Question

我有以下功能。问题是，该函数不是等待用户按预期单击图像，而是立即为images数组中的每个元素触发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);

保罗亚历山大的回答是正确的，但你不能通过引入另一个像这样的局部变量来解决问题。 JavaScript块（如“for”循环中的{}块）不会创建新的作用域，这与Java或C ++有显着（且非显而易见）的区别。只有函数创建范围（留出一些新的ES5特性），这就是为什么上面介绍了另一个函数的原因。循环中的“i”变量作为参数传递给匿名函数。该函数返回实际事件处理函数，但现在它引用的“i”将是外部函数范围的distinct参数。因此，每个循环迭代将创建一个专用于单个值“i”的新范围。

Answer 2

您将对imageReplace的调用结果分配给onclick处理程序。而是将对ImageReplace的调用包装在它自己的函数中

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

但是，这样做将始终替换最后一张图像。您需要创建一个新变量来包含索引

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

Answer 3

您想要做的是：

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

试试。

干杯

JS onclick无法正确触发

3 个答案: