let命令的应用

灰太狼 2022-04-05 04:54 128阅读 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>

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

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关每天一个linux命令（33）：let命令

命令：let let 命令是 BASH 中用于计算的工具，用于执行一个或多个表达式，变量计算中不需要加上 $ 来表示变量。如果表达式中包含了空格或其他特殊字符，则必须引起

朱雀/ 2023年07月13日 13:42/ 0 赞/ 66 阅读

相关 shell let expr $(()) 命令

let c=($c \ 9) \!/bin/bash c=2 let c=($c \ 9) echo "$c" v=3 echo "\`expr $v

ゝ一纸荒年。/ 2022年08月09日 09:44/ 0 赞/ 169 阅读

相关【ES6】let 命令

let命令：用于声明变量，类似于var，但声明的变量只在let命令所在的代码块作用域内有效。最经典的对比： //场景1： var a=[];

偏执的太偏执、/ 2022年06月06日 00:12/ 0 赞/ 134 阅读

相关 let命令的应用

先来看个例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

灰太狼/ 2022年04月05日 04:54/ 0 赞/ 129 阅读

相关 shell中的let命令

在shell中，let命令用于指定算术运算,即 let expretion。实例如下： \!/usr/bin/env bash a=2 echo "a init

我不是女神ヾ/ 2022年03月28日 11:18/ 0 赞/ 540 阅读

相关 ES6新增命令：let

let的介绍 let是ES6新增的命令。作用：声明变量。类似于：var。与var的区别：使用let声明的变量，只在其所在的代码块内有效。定义回顾

刺骨的言语ヽ痛彻心扉/ 2022年03月02日 09:50/ 0 赞/ 234 阅读

相关 let与cont命令

let命令声明 let可以用来声明一个变量，与var相似。但是var声明的变量是全局的，而let声明的变量只有在声明let的块中有效 { l

╰+攻爆jí腚メ/ 2021年12月03日 11:04/ 0 赞/ 225 阅读

相关 let 和 const 命令

\[外链图片转存失败(img-NwWAHQtZ-1565785931954)([https://upload-images.jianshu.io/upload\_images/

末蓝、/ 2021年10月01日 04:38/ 0 赞/ 312 阅读

相关 Linux let 命令

转自：[http://www.runoob.com/linux/linux-comm-let.html][http_www.runoob.com_linux_linux-co

妖狐艹你老母/ 2021年09月27日 06:02/ 0 赞/ 186 阅读

相关 Linux let 命令

命令：let let 命令是 BASH 中用于计算的工具，用于执行一个或多个表达式，变量计算中不需要加上 $ 来表示变量。如果表达式中包含了空格或其他特殊字符，则必须引起来。

灰太狼/ 2020年05月26日 14:09/ 0 赞/ 634 阅读