let命令的应用

最新推荐文章于 2019-07-25 14:39:06 发布

lishundi

最新推荐文章于 2019-07-25 14:39:06 发布

阅读量249

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/lishundi/article/details/84947604

版权

web 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

先来看个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
<ul id="hd">
    <li>zero</li>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
</ul>
</body>
<script>
    var lis = document.getElementById("hd").getElementsByTagName("li");
     console.log(lis);
    for(var i = 0;i < lis.length; i ++){
        console.log(lis[i]);
        lis[i].onclick = function () {
            alert(i);
        }
    }
</script>
</html>

console.log(lis)会向控制台打印包含６个元素的数组，结果如下：

HTMLCollection(6) [li, li, li, li, li, li]

console.log(lis[i])会向控制台打印每一个元素，结果如下：

<li>zero</li>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>

上面代码执行完毕后点击每个li标签会弹出6,原因是在页面刷新完成后，for循环就完成了，然后点击li标签，触发onclick事件，弹出的是最后一次的i值。

解决方法一：给每个标签加属性，将每次循环的i值赋值给对应的标签属性，然后每次循环弹出对应的标签属性。

<script>
    var lis = document.getElementById("hd").getElementsByTagName("li");
    for(var i = 0;i < lis.length; i ++){
        lis[i].list = i;
        console.log(lis[i].list);
        lis[i].onclick = function () {
            alert(this.list);
        }
    }
</script>

解决方法二：使用let命令

<script>
    var lis = document.getElementById("hd").getElementsByTagName("li");
    for(let i = 0;i < lis.length; i ++){
        lis[i].onclick = function () {
            alert(i);
        }
    }
</script>

上面代码中，i只在本轮循环有效，每一次循环的i值其实都是一个新的变量。

lishundi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
let命令的应用

先来看个例子：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;test&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;ul id="hd"
复制链接

扫一扫

专栏目录