时间戳

首页 > 解决方案 > 为什么 x 输出 onclick 等于被点击的列表索引？

javascript - 为什么 x 输出 onclick 等于被点击的列表索引？

问题描述

我之前遇到过这段代码，我不明白为什么当您单击列表项时，数组索引上的列表项编号会记录到控制台。每次单击列表项时控制台不应该记录 4 吗？更好的是，难道不应该因为 items[x] 等于 4 而无法单击任何列表项吗？我在这里不明白什么？

html

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

javascript

var items = document.getElementsByTagName("li");

for(let x=0; x < items.length; x++){
  items[x].onclick = function(){
    console.log(x);
  }
}

标签： javascript

解决方案

为什么您认为每次单击列表项时控制台日志都应该打印 4？

let在 JavaScript 中定义了自己的范围，这就是为什么当前迭代值会在后面保留（当元素被点击时）。

尽管您可以通过以下方式获得预期的输出var：

var items = document.getElementsByTagName("li");

for(var x=0; x < items.length; x++){
  items[x].onclick = function(){
    console.log(x);
  }
}
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

推荐阅读