循环节点列表中的所有元素时变量错误答案

【问题标题】：Wrong variable when looping all element in nodelist循环节点列表中的所有元素时变量错误
【发布时间】：2015-09-27 11:18:16
【问题描述】：

我创建了一个选择 2 个 div 的节点列表。然后我创建一个函数来显示用户单击的 div 的索引。但是输出总是2。我不知道错误在哪里。

这只是一个简单的问题，但它将解决我在事件中包含许多事件的其他复杂问题。谢谢。

HTML：

<div style="background:red; height:50px"></div>
<div style="background:black; height:50px"></div>

Javascript：

var div = document.getElementsByTagName('div');

for (i = 0; i < div.length; i++) {
    div[i].onclick = function() {
        alert(i);
    }
}

示例： https://jsfiddle.net/vutienphat/tm279uot/

【问题讨论】：

这是一种在 div 上设置函数的奇怪方式。在用户点击之前，代码不会一直循环通过一组 div 吗？（意味着页面上的 div 数量将始终是警报，而不是 div 的索引）

标签： javascript html events dom getelementsbytagname

【解决方案1】：

输出始终为 2，因为您正在提醒增量变量，该变量在有人单击时已经结束。请考虑以下代码逻辑

function index(element) {
    for ( var i = 0; element = element.previousElementSibling; i++ );
    return i;
}

divs = document.getElementsByTagName('div');

for (i = 0; i < divs.length; i++) {
    divs[i].onclick = function() {
        alert(index(this));
    }
}

<div style="background:red; height:50px"></div>
<div style="background:black; height:50px"></div>

【讨论】：

【解决方案2】：

试试这个：

在您的情况下，i 的值只不过是循环末尾的值i，即节点列表的length-1。

var div = document.getElementsByTagName('div');

for (i = 0; i < div.length; i++) {
  div[i].onclick = (function(i) {
    return function() {
      alert(i);
    }
  })(i)
}

<div style="background:red; height:50px"></div>
<div style="background:black; height:50px"></div>

Fiddle here

【讨论】：