时间戳

首页 > 解决方案 > nodeList 仅给出最后一项 onClick

javascript - nodeList 仅给出最后一项 onClick

问题描述

我有一个 JSON 文件，它提供了每个国家/地区，我将它们放在<li>标签中。

我想遍历这个列表，并在 every 上放置一个 click 事件<li>，它确实如此。但无论我点击什么，我总是得到返回给我的列表中的最后一项。我错过了什么？

我想要我点击的项目返回。

function lists() {
    var items = document.querySelectorAll('#Countries>ul>li');
    for (i = 0; i < items.length; i++) {   
       var item = items[i];
       item.onclick = function() {
          console.log(item);
       }
    }
}

标签： javascript

解决方案

您需要将item函数onclick作为参数传递。这是因为 for 循环内的函数将只考虑最后一项。

function lists() {
    var items = document.querySelectorAll('#Countries>ul>li');
    for (i = 0; i < items.length; i++) {   
       var item = items[i];
       item.onclick = function(item) {
          console.log(item);
       }
    }
}

您还可以使用 let 隔离范围：

function lists() {
    let items = document.querySelectorAll('#Countries>ul>li');
    for (let i = 0; i < items.length; i++) {   
       let item = items[i];
       item.onclick = function() {
          console.log(item);
       }
    }
}

推荐阅读