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

试试这个：

在您的情况下，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

在循环节点列表

2 个答案: