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



<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">111div>
    <div>222div>
    <div>333div>
body>

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

你可能感兴趣的:(javascript中获取数组某个元素索引值涉及到的this.index问题)