按钮点击后JS访问元素index值失效问题：为什么循环中分配的index值在按钮点击事件中失效？

按钮点击后js访问元素index值失效问题

下面这段代码旨在实现按钮点击后，隐藏一个无序列表中的所有元素，并显示与被点击按钮相对应的列表元素。

<input type="button" value="a">
<input type="button" value="b">
<input type="button" value="c">
<input type="button" value="d">
<input type="button" value="e">
<input type="button" value="f">

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<script>
    var oinput = document.getelementsbytagname("input");
    var oli = document.getelementsbytagname("li");

    for (var i = 0; i < oinput.length; i++) {
        oinput[i].index = i;
        oinput[i].onclick = function() {
            for (var j = 0; j < oli.length; j++) {
                console.log(i); // 输出为6
                oli[j].style.display = "block";
            }
            console.log(i); // 输出为6
            oli[this.index].style.display = "none";
        }
    }
</script>

然而，代码中却存在一个问题：按钮点击后，输出的index值始终为6，导致无法正确隐藏或显示对应的列表元素。

问题原因

问题产生于代码中的for循环：

靠岸学术

一款集翻译，阅读，文献管理于一体的英文文献阅读器

下载

for (var i = 0; i < oinput.length; i++) {
    oinput[i].index = i;
    oinput[i].onclick = function() {
        ...
    }
}

当此for循环执行时，它会为每个按钮元素分配一个index值。但是，当按钮被点击时，用于触发onclick事件处理程序的实际index值获取自循环的最后一次迭代。因此，对于所有按钮点击事件，index值都为6，这是循环的最后一次迭代的值。

解决方案

要解决这个问题，需要将index值分配到onclick事件处理程序函数中，而不是在for循环中分配：

for (var i = 0; i < oInput.length; i++) {
    (function(index) {
        oInput[i].onclick = function() {
            ...
            oLi[index].style.display = "none";
            ...
        }
    })(i);
}

通过改用闭包，每个按钮的onclick事件处理程序都会获得自己唯一的index值，从而可以正确隐藏或显示对应的列表元素。