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

发布日期： 2024-11-07 阅读量： 作者： 网络

按钮点击后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>

# 点击事件

上一篇: C++ 函数性能优化对系统稳定性的影响

下一篇: PHP 函数命名规范解读：参数顺序最佳实践

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

随便看看