js-排他思想

2021-10-26 13:02:46 作者：互联网

排他思想：如果有同一组元素，我们想要某个元素实现某种样式，需要用到循环的排他思想
1）首先将所有元素清除样式（干掉所有人）
2)给当前元素设置样式（留下自己）

利用排他思想实现点击按钮变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验</title>
    <style>
        body{
            background-color: black;
        }
    </style>
</head>
<body>
    <!-- 排他思想 -->
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //1.获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        //btns得到的是伪数组，里面的每个元素btns[i]
        //2.利用循环绑定事件
        for(let i=0;i<btns.length;i++){
            btns[i].onclick=function(){
                //1)先将所有按钮的背景颜色去掉（干掉所有人）
                for(let i=0;i<btns.length;i++){
                    btns[i].style.backgroundColor='';
                }
                //2)然后才让当前的元素背景颜色改为蓝色 （留下自己）
                btns[i].style.backgroundColor='blue';
            }
            

        }
        
    </script>
</body>
</html>

注意：在第一层大循环中let i=0如果换成了var i=0的话下面的btns[i].style.backgroundColor='blue'中就不可以使用btns[i],只能使用this。在外循环中循环i++是给每个按钮绑定事件，当触发事件的时候才会产生效果。
个人理解：
如果使用var i：在退出循环时，迭代变量保存的时导致循环退出的值：5.在之后执行代码时，所有的i都是同一变量，所以会出现报错。这个时候只能用this，这时候this指向的就是调用函数的实例。
使用let i：而在使用let声明迭代变量时，js引擎在后台会位每个迭代循环声明一个新迭代变量，btns[i]使用的都是不同的变量实例。后台会根据我们所点击的不同序号的按钮，重新声明i的变量，i的值就会随之变化，不会报错

标签：迭代,思想,元素,js,循环,let,按钮,btns
来源： https://blog.csdn.net/weixin_51929568/article/details/120969851