JavaScriptcallback函数中的variables总是获取循环中的最后一个值？

我正在尝试执行以下操作：

我有一组图像和select（下拉）HTML元素，每个30。 我试图从1到30循环上使用AddEventListener，以便当我改变select的值，图像src更新（和图像的变化）。

AddEventListener函数是这样的：

function AddEventListener(element, eventType, handler, capture) { if (element.addEventListener) element.addEventListener(eventType, handler, capture); else if (element.attachEvent) element.attachEvent("on" + eventType, handler); } 

我试过这个，它的工作原理：

 var urlfolderanimalimages = "http://localhost/animalimages/"; var testselect = "sel15"; var testimg = "i15"; AddEventListener(document.getElementById(testselect), "change", function(e) { document.getElementById(testimg).src = urlfolderanimalimages + document.getElementById(testselect).value; document.getElementById(testimg).style.display = 'inline'; if (e.preventDefault) e.preventDefault(); else e.returnResult = false; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; }, false); 

但后来我试图在循环中调用它，它不起作用。 事件被添加，但是当我改变任何select，它将更新最后一个（ID为i30的图像）。

 var urlfolderanimalimages = "http://localhost/animalimages/"; for (k=1;k<=30;k++) { var idselect = "sel" + k; var idimage = "i" + k; AddEventListener(document.getElementById(idselect), "change", function(e) { document.getElementById(idimage).src = urlfolderanimalimages + document.getElementById(idselect).value; document.getElementById(idimage).style.display = 'inline'; if (e.preventDefault) e.preventDefault(); else e.returnResult = false; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; }, false); } 

我究竟做错了什么？ 我是JavaScript新手（一般编程），所以对于呕吐诱导代码:(

Answer 1

问题是你正在closures同一个variables 。

var不声明variables ¹ 。 它只是给一个给定的执行上下文注释一个标识符的“停止查找”。

请参阅Javascriptclosures“常见问题解答”了解所有的细节。 “执行上下文”和“范围链”部分是最有趣的。

常见的习惯用法是执行双重绑定来创build新的执行上下文。

例如

 var k for (k = 1; k < 10; k++) { setTimeout((function (_k) { return function () { alert(_k) } })(k), k * 100) } 

---

从JavaScript第5版开始，就有Function.bind （它也可以在第三版中实现，例如从prototype.js中绑定 ），可以这样使用：

 var k for (k = 1; k < 10; k++) { setTimeout((function () { alert(this) }).bind(k), k * 100) } 

---

¹这个结构在ECMAScript规范中被称为variables声明。 但是，这种说法，正如它可能被视为误导，强调要回家一个观点：也看到“variables提升”。

Answer 2

我也在http://meshfields.de/event-listeners-for-loop/find了这个解决scheme：;

 var myArr = [0,1,2,3]; for (var i = 0; i < myArr.length; i+=1) { (function (i) { document.getElementById('myDOMelement' myArr[i]).onclick = function () { if (window.console.firebug !== undefined) { console.log('myDOMelement' myArr[i]); } else { alert('myDOMelement' myArr[i]); } }; }) (i); }