javascriptでは、配列のある要素インデックス値に関わるthis.index問題を取得します.

9190 ワード



<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となります.