爲什麼我的循環事件不起作用？

我試圖設置節點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); 
    }

來源

2016-11-26 Corbee

的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"; 
    }; 
}

正如所建議的參宿一的意見，及如何使用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"; 
    }; 
});

來源

2016-11-26 10:00:36 nem035

爲什麼我們需要IIFE呢？ –

在訪問文件數組時保持對正確的'i'的引用 – nem035

onclick的第一個參數是事件，所以你不能只是把它傳遞給它 –

如果你結合異步回調相對於數組，那麼它更容易使用.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"; 
    }); 
});

來源

2016-11-26 10:07:26 Alnitak

爲什麼我的循環事件不起作用？

回答

相關問題