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

发布于 2022-09-03 00:41:58 字数 2098 浏览 35 评论 0

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦太阳 2022-09-10 00:41:58

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

回复收藏 0

离线来电— 2022-09-10 00:41:58

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

回复收藏 0

我的鱼塘能养鲲 2022-09-10 00:41:58

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

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

回复收藏 0