js_for循环

for循环：
for(1初始条件；2判断条件；4变量改变){
3条件成立的时候执行的代码；
}
执行顺序：
1，初始条件（for循环执行的时候只执行一次）
2，判断条件
3，条件成立的时候执行代码
4，变量改变
2，判断条件
3，条件成立的时候执行代码
4，变量改变
，，，，，
变量改变
条件不成立，退出循环

问题：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
//获取li元素
var Li = document.getElementByTagName('li');
//给每个li添加点击元素，添加背景色；
for(var i=0;i<Li.length;i++){
    Li[i].onclick = function(){
        Li[i].style.background = 'red';
    }
}

问题：弹出的i一直为3；
原因：for循环为每个Li添加点击事件，当for循环执行完了才能执行点击事件，此时i为3，所以只能给最后一个li添加背景色。
解决办法：1，用let申明变量i
2，使用this，this.style.background = ‘red’;