运行效果、变量声明问题

来源:2-15 BOM特效开发(2)

小林_log

2020-12-01 10:24:51

# 具体遇到的问题

遍历offsetTopArr数组這段,for循环使用let声明会出现以下报错讯息,楼层切换正常,但导航颜色切换失效;如果改成var声明就正常运行,想请问只使用let 跟const声明,整体该如何修改,谢谢



http://img.mukewang.com/climg/5fc5a57409b701a205270217.jpg

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin0;

            padding0;

        }

        

        .content-part {

            width1000px;

            margin0 auto;

            margin-bottom30px;

            background-color#ccc;

            font-size50px;

        }

        

        .floornav {

            positionfixed;

            right20px;

            top50%;

            margin-top-100px;

            width120px;

            height200px;

            background-colororange;

        }

        

        .floornav ul {

            list-stylenone;

        }

        

        .floornav ul li {

            width120px;

            height40px;

            line-height40px;

            font-size26px;

            text-aligncenter;

            cursorpointer;

        }

        

        .floornav ul li.current {

            background-colorpurple;

            colorwhite;

        }

    </style>

</head>


<body>

    <nav class="floornav">

        <ul id="list">

            <li data-n="科技" class="current">科技</li>

            <li data-n="体育">体育</li>

            <li data-n="新闻">新闻</li>

            <li data-n="娱乐">娱乐</li>

            <li data-n="视频">视频</li>

        </ul>

    </nav>

    <section class="content-part" style="height: 647px" data-n="科技">

        科技栏目

    </section>

    <section class="content-part" style="height: 585px" data-n="体育">

        体育栏目

    </section>

    <section class="content-part" style="height: 722px" data-n="新闻">

        新闻栏目

    </section>

    <section class="content-part" style="height: 610px" data-n="娱乐">

        娱乐栏目

    </section>

    <section class="content-part" style="height: 674px" data-n="视频">

        视频栏目

    </section>


    <script>

        // 使用事件委托给li添加监听

        const list = document.getElementById('list');

        const contentParts = document.querySelectorAll('.content-part');

        const lis = document.querySelectorAll('#list li');


        list.onclick = function(e) {

            if (e.target.tagName.toLowerCase() == 'li') {

                // getAttribute表示得到标签身上的某个属性值

                const n = e.target.getAttribute('data-n');


                // 用属性选择器来寻找带有相同data-n的

                const contentPart = document.querySelector('.content-part[data-n=' + n + ']');


                // 让页面的卷洞自动成为盒子的offsetTop值

                document.documentElement.scrollTop = contentPart.offsetTop;

            }

        }


        // 在页面加载好之后,将所有的content-part盒子的offsetTop值推入数组

        const offsetTopArr = [];


        // 遍历所有的contentPart,将它们的净位置推入数组

        for (let i = 0i < contentParts.lengthi++) {

            offsetTopArr.push(contentParts[i].offsetTop);

        }

        // 为了最后一项方便比较,可以推入一个无穷大

        offsetTopArr.push(Infinity);


        // 当前所在楼层

        let nowfloor = -1;


        // 窗口的卷动

        window.onscroll = function() {

            const scrollTop = document.documentElement.scrollTop;

            // 遍历offsetTopArr数组,看看当前的scrollTop值在哪两个楼层之间

            for (let i = 0i < offsetTopArr.lengthi++) {

                if (scrollTop >= offsetTopArr[i] && scrollTop < offsetTopArr[i + 1]) {

                    break;

                }

            }

            // 退出循环的时候,i是几,就表示当前楼层是几

            // 如果当前所在楼层不是 i,表示换楼了

            if (nowfloor != i) {

                console.log(i);

                // 让全局变量改变为楼层号

                nowfloor = i;


                // 设置下标为 i 的项有cur

                for (let j = 0j < lis.lengthj++) {

                    if (j == i) {

                        lis[j].className = 'current';

                    } else {

                        lis[j].className = '';

                    }

                }

            }


        }

    </script>

</body>


</html>


写回答

1回答

好帮手慕慕子

2020-12-01

同学你好, 因为let声明的变量会形成块级作用域,在块级作用域之外无法访问到let声明的变量,所以将var换成let之后,在for循环外访问i会出现报错,无法实现效果。建议:将let声明在for循环外就可以了。

http://img.mukewang.com/climg/5fc5ad600919fff611630494.jpg

对于块级作用域以及let的使用,目前阶段,简单了解下即可,后面的课程中会有详细的讲解,同学到时候再重点学习下就可以了。

http://img.mukewang.com/climg/5fc5adb60947b5d906170732.jpg

祝学习愉快~

0

0 学习 · 15276 问题

查看课程