如何解决JS onclick无法正确触发
| 我有以下功能。问题在于该函数没有等待用户单击期望的图像,而是立即为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]);
}
}
解决方法
哇,我只是用自己的一些代码修复了这个令人尴尬的错误。其他人都弄错了:
images[i].onclick = function() {imgReplace(images[i]);};
将无法正常工作。相反,它应该是:
images[i].onclick = (function(i) { return function() { imgReplace(images[i]); }; })(i);
Paul Alexander的答案是正确的,但是您不能通过引入其他局部变量来解决问题。 JavaScript块(例如\“ for \”循环中的{}
块)不会创建新的作用域,这与Java或C ++有显着(且不是显而易见的)区别。只有函数创建作用域(预留一些ES5新功能),因此这就是上面引入另一个函数的原因。循环中的\“ i \”变量作为参数传递给匿名函数。该函数返回实际的事件处理函数,但是现在它引用的“ i”将是外部函数作用域的唯一参数。因此,每个循环迭代将创建一个专用于\“ i \”单个值的新作用域。
,您将对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]); }
}
,您要在这里做的是:
images[i].onclick = function() {imgReplace(images[i]);}
试试看。
干杯
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。