javascript中获取数组某个元素索引值涉及到的this.index问题

最新推荐文章于 2024-03-27 20:31:12 发布

Romantic mystery LH

最新推荐文章于 2024-03-27 20:31:12 发布

阅读量2.4k

点赞数 7

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45760053/article/details/104128702

版权

<!--选项卡切换-->
<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript">
        window.onload = function () {
            var buttons = document.getElementsByTagName('input');
            var oDiv = document.getElementsByTagName('div');
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].index = i; //给buttons[i].index赋值，否则下方this.index的值为undefined
                buttons[i].onclick = function () { 
                    for (var j = 0; j < oDiv.length; j++) {
                        oDiv[j].id = ' ';
                    };
                    oDiv[this.index].id = 'active'; //不能用oDiv[i].id，因为i的值是固定的
                    console.log(i);
                    console.log(this.index);
                };
            };
        };
    </script>
</head>

<body>
    <input type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div id="active">111</div>
    <div>222</div>
    <div>333</div>
</body>

</html>

在做选项卡切换功能时，使用oDiv[i].id来改变div的值，发现不能成功，原来是因为onclick在鼠标点击时才触发，此时网页已加载完成，i=3，故无法正常获取索引值；而加上buttons[i].index = i就是在for循环时给每个元素都增加index属性，并附上i的值，此时的i不是在网页加载完后执行的，所以能正确获取索引值，倘若省略这一步，this.index的值将为undefined。

Romantic mystery LH

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
javascript中获取数组某个元素索引值涉及到的this.index问题

<!DOCTYPE html><html><head> <script type="text/javascript"> window.onload = function () { var buttons = document.getElementsByTagN...
复制链接

扫一扫