为什么我的Loop事件处理程序不起作用?

时间:2016-11-26 09:51:31

标签: javascript node.js

我正在尝试将节点sharedobject设置为触发每个href click事件,但由于某些原因,只有第一个正在工作。我做错了什么?

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);
  }

2 个答案:

答案 0 :(得分: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在评论中所建议的那样,使用forEach会创建一个单独的范围并消除对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";
  };
});

答案 1 :(得分:1)

如果您要绑定相对于数组的异步回调,那么使用.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";
    });
});