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