用for循环给几个元素绑定mouseove和mouseout事件，报错

chrome浏览器报这样的错误：“Uncaught TypeError: Cannot read property 'style' of undefined”
如果在for循环外绑定就不会出错。
js代码：

window.onload = function(){
    var sideList = document.getElementById("side_tool").getElementsByTagName("li");
    var contentList = document.getElementById("side_content").getElementsByTagName("div");
    for (var i = 0; i < sideList.length; i++){
        sideList[i].onmouseover = function(){
        contentList[i].style.display = "block";
    }
        sideList[i].onmouseout = function(){
        contentList[i].style.display = "none";
    }
    }
}

html代码：

<body>
        <div id="side_box">
            <div id="side_tool">
                <ul>
                    <li class="side_list" index="1"></li>
                    <li class="side_list" index="2"></li>
                    <li class="side_list" index="3"></li>
                    <li class="side_list" index="4"></li>
                    <li class="side_list" index="5"></li>
                    <li class="side_list" index="6"></li>
                </ul>
            </div>
            <div id="side_content">
                <div class="main_content" index="1" style="background-color: red; display: none;"></div>
                <div class="main_content" index="2" style="background-color: yellow; display: none;"></div>
                <div class="main_content" index="3" style="background-color: black; display: none;"></div>
                <div class="main_content" index="4" style="background-color: #888; display: none;"></div>
                <div class="main_content" index="5" style="background-color: #850; display: none;"></div>
                <div class="main_content" index="6" style="background-color: #058; display: none;"></div>
            </div>
        </div>
        <script src="js/main.js"></script>
    </body>

又遇到这个 for 循环和异步调用的问题了，请参考我在这个问题下的回答：https://.com/q/1010000005797985/a-1020000005798132

用自执行函数与闭包进行解决

下标变了，找不到所以报错，
sideList[i].index=i;绑定下标
sideList[this.index]；
contentList[this.index];对应的下标

用 let 替换 var

这里的绑定事件是异步执行的，因此当真正执行到

 contentList[i].style.display = "block";

的时候，已经超出了for的作用域，因此i的值根本就不能按照你的设想等同于当前循环的i。
正确做法应该是

for (var i = 0; i < sideList.length; i++){
        sideList[i].onmouseover = function(){
        contentList[this.index].style.display = "block";
    }

【热门文章】