1.7、for循环中的问题 ，你遇到过吗？

一、需求 点击那个li让那个li加颜色 纯原生实现

<ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
        <li>555555</li>
    </ul>
    <script>
 
        var oli = document.querySelectorAll('li')
        console.log(oli) //[li, li, li, li, li] 5个li
            // oli.onclick = function() {} //这样写肯定是不对的 
            //oli是一个集合 不是指一个元素 只有元素才能添加点击事件对吧
            //这是就要用到for循环
        for (var i = 0; i < oli.length; i++) {
            console.log(i) //打印 0 1 2 3 4
            oli[i].onclick = function() {
                console.log(i) //打印的是5
                    //为什么是五呢
		//解决  this 指向的就是点击元素
                this.style.background = 'red'
            }
        }
        console.log(i) //5
            //for循环速度很快  先看一下执行顺序 
            //1.值：var i=0
            //2.条件：i<oli.length
            //3.执行代码
            //4.i++
        //然后i++之后在 i=1
        //条件
        //执行代码
        //当i++之后 i=5时
        //条件不满足 不执行代码  此时i=5 所以说 for循环外面的i 是 5
        //li面的i为什么也是5呢  for循环执行速度问题
        //你还没点呢 for循环已经结束了 for 循环结束时 i 已经是5 了
    </script>

二、完整版 需求 点那个li让那个li添加背景颜色，并且其他li去掉背景颜色

  <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
        <li>555555</li>
    </ul>
    <script>
        // 需求 点击那个li让那个li加颜色 并让其他li去掉背景颜色 纯原生实现
        var oli = document.querySelectorAll('li')
        console.log(oli) //[li, li, li, li, li] 5个li

        for (var i = 0; i < oli.length; i++) {
            oli[i].onclick = function() {
                //点击时 可以把所有的背景清掉
                for (var j = 0; j < oli.length; j++) {
                    oli[j].style.background = ''
                }
                //在给点击的加上背景
                this.style.background = 'red'
                console.log(this.innerHTML)
            }
        }
    </script>