为什么我的循环事件不起作用？

我试图设置节点sharedobject触发每个href点击事件，但由于某些原因，只有第一个工作。 我究竟做错了什么？

for (let i = 0; i < files.length; i++) { file_container.innerHTML = file_container.innerHTML + `<a id="file${i}" href="#" class="list-group-item">${files[i]}</a>`; document.getElementById('file' + i).onclick = (function (i) { require('electron').remote.getGlobal('sharedObject').filename = files[i].replace('.tnb',''); window.location = "login.html"; })(i); } 

Answer 1

onclick赋值应该接受一个函数，但是你的代码正在做什么（立即）执行一个函数，然后把这个执行的结果返回给onclick 。

由于您使用的是let ，它具有块范围，因此不需要使用IIFE，只需要返回一个函数作为处理程序，而不是执行它：

 for (let i = 0; i < files.length; i++) { file_container.innerHTML = file_container.innerHTML + `<a id="file${i}" href="#" class="list-group-item">${files[i]}</a>`; document.getElementById('file' + i).onclick = function () { // <-- return the click handler for each element require('electron').remote.getGlobal('sharedObject').filename = files[i].replace('.tnb',''); window.location = "login.html"; }; } 

正如Alnitak在评论中所build议的那样，使用forEach将创build一个单独的范围并消除对IIFE的需求：

 files.forEach(function (file, i) { file_container.innerHTML = file_container.innerHTML + `<a id="file${i}" href="#" class="list-group-item">${file}</a>`; document.getElementById('file' + i).onclick = function () { require('electron').remote.getGlobal('sharedObject').filename = file.replace('.tnb',''); window.location = "login.html"; }; }); 

Answer 2

如果你绑定了一个相对于数组的asynchronouscallback，那么使用.forEach要容易.forEach ：

 files.forEach((file, i) => { file_container.innerHTML = file_container.innerHTML + `<a id="file${i}" href="#" class="list-group-item">${file}</a>`; document.getElementById('file' + i).onclick = () => { require('electron').remote.getGlobal('sharedObject').filename = file.replace('.tnb',''); window.location = "login.html"; }); });