我在循环中的项目上创建 JavaScript 事件，但每次我触发事件时，它只会触发最后创建的事件。

JavaScript:

var dirLinks = document.getElementsByClassName("dirLink"), 
    iframe   = document.getElementById("tmpImg"); 
 
showDir.addEventListener('click', showDirContent, false); 
showImgs.addEventListener('click', showImgsContent, false); 
 
for (var i = 0; i < dirLinks.length; i++) { 
    var link = dirLinks[i]; 
    link.onclick = function () { 
        updateIframeSource(link.getAttribute("imgSrc")); 
    } 
} 
 
function updateIframeSource(source) { 
    iframe.src = source; 
} 

HTML:

<a class="dirLink" imgSrc="img1.jpg" href="#">img1.jpg</a><br /> 
<a class="dirLink" imgSrc="img2.jpg" href="#">img2.jpg</a><br /> 
<a class="dirLink" imgSrc="img3.jpg" href="#">img3.jpg</a><br /> 
<a class="dirLink" imgSrc="img4.jpg" href="#">img4.jpg</a><br /> 
<a class="dirLink" imgSrc="img5.jpg" href="#">img5.jpg</a> 
 
<iframe id="tmpImg"></iframe> 

无论我点击哪个链接，它总是会点击传入的 img5.jpg 的 updateIframeSource 函数。

请您参考如下方法:

这是因为在 javascript 中，for 循环不会在每次迭代中创建新的范围(只有函数会这样做)，所以您引用一个变量 link，它在循环结束时执行的函数中，所以它总是5，要解决这个问题，只需将整个内容包装在匿名函数中，如下所示:

for(var i = 0; i < dirLinks.length; i++) { 
    (function(link) { 
        link.onclick = function () { 
            updateIframeSource(link.getAttribute("imgSrc")); 
        }; 
    })(dirLinks[i]); 
}