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