let命令的应用-蒲公英云

let命令的应用

灰太狼 2022-04-05 04:54 196阅读 0赞

先来看个例子：

<!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>