Question

我有一个JSON文件，该文件可向我提供每个国家/地区的信息，并将它们放在<li>标记中。

我想遍历此列表，并在每个<li>上放置一个click事件，这样做。但是无论我单击什么，我总是会得到列表中的最后一项。我想念什么？

我希望我单击的物品退回。

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

Answer 1

您需要在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);
       }
    }
}

Answer 2

在for循环中使用let声明变量，该变量将声明块作用域局部变量。试试

for (let i = 0; i < items.length; i++) {

Answer 3

存在范围问题，var是函数范围。

您可以使用es6中的let来声明变量，或者另一种方法是使用bind。

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(this);
    }.bind(item);
  }
}
lists();

<div id="Countries">
  <ul>
    <li>country1</li>
    <li>country2</li>
  </ul>
</div>

nodeList仅提供带有onClick的最后一项

3 个答案: