排他思想，循环

效果图：

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>

<script>
/*      如果有同一组元素,我们想要某一个元素实现某种样式 ,需要用到循环的排他思想算法:
            1.所有元素全部清除样式(干掉其他人)
            2.给当前元素设置样式(留下我自己)
            3.注意顺序不能颠倒,首先干掉其他人,再设置自己 */

// 获取所有按钮元素
var btns = document.querySelectorAll('button');
// btns得到的是伪数组
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        // 先把所有的按钮背景颜色去掉
        for (var i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = '';
        }
        // 然后再修改当前的元素背景颜色
        this.style.backgroundColor = 'pink';

    }
}
</script>
posted @ 2022-05-18 22:33  MuJinHK  阅读(44)  评论(0)    收藏  举报