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

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《按钮点击后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值，从而可以正确隐藏或显示对应的列表元素。

今天关于《按钮点击后JS访问元素index值失效问题：为什么循环中分配的index值在按钮点击事件中失效？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！