javascript - 这个错误是为什么啊？

问题描述

问 题

目的是想让二级菜单下的图片做一个margin-left的缩入

<ul class="navLevel1" id="Level1" style="width:125px;">
        <li class="toggle" id="toGgle"><img src="images/classfy_03.jpg"/ id="Dir"></li>
        <li class="project-manager highLevel"><img src="images/project_06.jpg"/><a href="#">项目管理</a></li>
        <li class="member-manager highLevel"><img src="images/member_06.jpg"/><a href="#">成员管理</a></li>
        <li class="cost-manager beHovered highLevel"><img src="images/money_06.jpg"/><a href="#">费用管理</a></li>
        <li class="data-manager highLevel MenuSlide" id="dateManager">
            <img src="images/data_06.jpg"/><a href="#">数据管理</a>
            <ul class="navLevel2 date-nav active" id="Level2Data" style="height:0;">
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">数据采集</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">数据迁移</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">数据同步</a></li>
            </ul>    
        </li>
        <li class="task-tool task-nav highLevel MenuSlide" id="taskTool">
            <img src="images/data_06.jpg"/><a href="#">任务工具</a>
            <ul class="navLevel2 active " id="Level2Task"  style="height:0;">
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/ class="vary"><a href="#">发布任务</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/ class="vary"><a href="#">增加任务</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">删除任务</a></li>
            </ul>
        </li>
        <li class="resource-manager resource-nav highLevel MenuSlide" id="resourceMan">
            <img src="images/data_06.jpg"/><a href="#">资源管理</a>
            <ul class="navLevel2 active " id="Level2Resource" style="height:0;">
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">虚拟机</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">数据库案例</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">文档及帮助</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">开放API</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">云储存</a></li>
            </ul>
        </li>
    </ul>

var rotatGroup = document.getElementById('Level1').getElementsByClassName('vary');
var lan = rotatGroup.length
for (var k=0;k<lan;k++){
    btnaaaaaa.onclick = function(){
        rotatGroup[k].classList.toggle('rotate')
    }
};

script标签页放在body之后的，报错是
Uncaught TypeError: Cannot read property 'classList' of undefined
at HTMLButtonElement.btnaaaaaaa.onclick

btnaaaaaa这个按钮是加上去测试的。。。

解决方案

闭包问题，你把k打印出来就知道了，你的k始终为lan，rotatGroup[lan]肯定是undefined

for (var k=0;k<lan;k++){
    (function(k){
        btnaaaaaa.onclick = function(){
            rotatGroup[k].classList.toggle('rotate')
        }
    })(k)
};

你的意图可能是：

    btnaaaaaa.onclick = function(){
         for (var k=0;k<lan;k++){
            rotatGroup[k].classList.toggle('rotate');
        }
   }

这篇关于javascript - 这个错误是为什么啊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！