老师帮我检查下作业，顺便问个var与let问题。

来源：3-13 编程练习

GanKuoLong

2023-01-30 11:36:55

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jquery</li>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>ES6</li>
    </ul>
    <script type="text/javascript">
        //补充代码
        let lis=document.querySelectorAll('ul li')
        let arr=[]
        for(let i=0;i<lis.length;i++){
            arr.push(lis[i].innerText)
            lis[i].onmouseover=function(){
                lis[i].style.color='red'
                lis[i].style.fontSize='20px' 
                lis[i].innerHTML+='我是第'+[i]+'个'
            }
            lis[i].onmouseout=function(){
                lis[i].style.color=''
                lis[i].style.fontSize=''  
                lis[i].innerHTML=arr[i]
            }
         }
         
    //    问题描述：虽然实现效果没问题，但是这个执行流我还有点没搞懂，如果这段代码的for
    //    循环是用var声明变量条件，那么整个for循环体按理说是会先全部会执行完，并且最后鼠标
    //    进入移出应该是没有产生题目最终效果吧，因为for已经执行完了，而我的鼠标还没进
    //    入就结束了，所以无效果。但是for循环用let作为变量条件，为什么for循环体执行完后，
    //    鼠标进入移出却可以后触发监听事件呢，是因为它把每个li保存了一个独立作用域吗？
    </script>
</body>
</html>

写回答

1回答