Question

在下面的代码中，j的值始终设置为迭代的最后一个。我已经在使用IIFE，但它仍然提供了非预期的行为。有什么东西我做错了吗？

function renderUsers(users) {
    const frag = document.createDocumentFragment();
    const userList = document.getElementById('user-list');

    // Create and append all the users on the user list
    for (var j = 0; j < users.length; j++) {
        var item = document.createElement('li');
        var division = document.createElement('div');
        var userName = document.createElement('span');
        var deleteButtonAnchor = document.createElement('a');
        var deleteButton = document.createElement('i');
        deleteButton.classList.add('material-icons');
        deleteButton.textContent = 'delete_forever';
        (function() {
            deleteButton.addEventListener('click',function() {
                console.log(j);
            });
        })();
        deleteButtonAnchor.appendChild(deleteButton);
        division.appendChild(userName);
        division.appendChild(deleteButtonAnchor);
        item.appendChild(division);


        userName.appendChild(document.createTextNode(users[j].name.first+' '+users[j].name.last));
        frag.appendChild(item);
    }
    userList.appendChild(frag);
}

Answer 1

你想要做什么关闭，就是把迭代变量作为参数传递，如下：

 (function(j) {
     deleteButton.addEventListener('click',function() {
          console.log(j); // j is the parameter
     });
 })(j);

或者@torazaburo在评论中相当注意到，您可以使用let关键字作为迭代变量来消除创建闭包的需要。有关let关键字的更多信息，请参阅here。但请注意，它是ES6功能，在旧版浏览器中未实现，因此您可能需要先将其转换（例如使用babel）。

循环中的addEventListener不能与IIFE一起使用

1 个答案: