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

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>

Answer 2

试试这个：

In your case, value of i is nothing but a value i has at the end of the loop which is length-1 of node list.

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

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

Wrong variable when looping all element in nodelist

html

javascript

events

dom

getelementsbytagname