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

Question

我创建了一个选择 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/

Answer 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>