用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>
阅读 3.7k
5 个回答

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

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

 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";
    }

用 let 替换 var

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

推荐问题
宣传栏