使用let实现循环小例子

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>JQ</li>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>ES6</li>
        </ul>
    </body>
    <script>
        //使用let声明变量i,i就只在本轮循环中有效;如果使用var进行变量声明的话,就是全局变量,最后输出的就都是第8个
        var list = document.getElementsByTagName('li');
        for(let i = 0; i < list.length; i++){
            list[i].onmouseover = function(){
                str = list[i].innerText;
                this.innerText += '我是第' + (i+1) + '个'
                this.style.fontSize = '22px'
                this.style.color = '#f00'
            }
            list[i].onmouseout = function(){
                this.style.color = 'black'
                this.style.fontSize = '16px'
                this.innerText = str;
            }
        }
        
    </script>
</html>

 

 

用 let 声明的变量只在当前作用域中起作用，循环一次｛｝中就会有一个 i 值，当点击元素之后，就会获取到当前环境中的 i 值，从而结果是对应的。

如果用 var 声明且不添加自执行的匿名函数的话，for循环会先执行完毕，当点击元素的时候才会执行绑定的点击事件，点击事件环境中没有 i 值，就会沿着作用域向上找，找到的就是for循环中的 i 值。这个时候for循环已经执行完毕了，i值为7，所以无论划过哪一个按钮，弹出结果都是11

 

posted @ 2020-01-30 14:23  是桂  阅读(530)  评论(0)  编辑  收藏  举报