JS实例鼠标点击模块实现相应页面的转换 /for循环导致变量提升的问题

最新推荐文章于 2023-11-17 18:16:44 发布

yogur_father

最新推荐文章于 2023-11-17 18:16:44 发布

阅读量154

点赞数

分类专栏：入门学习文章标签： js javascript

本文链接：https://blog.csdn.net/yogur_father/article/details/110404020

版权

入门学习专栏收录该内容

156 篇文章 3 订阅

订阅专栏

1. 在JS中如果使用`var`定义循环变量，会导致变量提升，也就是直接使循环变量为最后一个数

所以我们使用`let`对循环变量定义

2.除了for循环我们也可以使用 `let i in 数组`的方式实现循环

3.使用循环返回对象中的属性值

for(var i in data[0])
{
	console.log(i);              // 返回对象属性名
    console.log(data[0][i]);	 // 返回对象属性内容
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 人物表格 </title>
    <link rel="stylesheet" href="style.css">

    
</head>

<body>
    <div class="fatherbox">
        <ul class="servelist">
            <li>商品介绍</li>
            <li>规格与包装</li>
            <li>售后与保障</li>
            <li>商品评价</li>
        </ul>

        <div class="showarea"></div>
    </div>

    
    
    <!-- JS 代码位置 -->
    <script>
        var li_list = document.querySelector(".servelist");
        var showarea = document.querySelector(".showarea")
        var li = li_list.querySelectorAll("li");

        for(let i = 0;i < li.length; i++)
        {
            li[i].onclick = function() {
                for(let j = 0;j < li.length;j++){
                    li[j].className = "";

                    showarea.className = "showarea current" + i;
                }
            }

        }
    </script>
</body>

</html>

CSS

* {
    padding: 0px;
    margin: 0px;
}

.fatherbox {
    width: 500px;
    height: 100px;
    margin: 100px auto;
}

.servelist li {
    float: left;
    background-color: orange;
    
    padding: 20px;
    list-style-type: none;
}

.servelist li:hover {
    background-color: grey;
    cursor: pointer;
}

.showarea {
    float: left;
    width: 448px;
    height: 300px;

    background-color: pink;
}

.current0 {
    background-color:red;
}
.current1 {
    background-color:skyblue;
}
.current2 {
    background-color:green;
}
.current3 {
    background-color:purple;
}

在这里插入图片描述

yogur_father

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实例鼠标点击模块实现相应页面的转换 /for循环导致变量提升的问题

在JS中如果使用var定义循环变量，会导致变量提升，也就是直接使循环变量为最后一个数所以我们使用let对循环变量定义HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
复制链接

扫一扫