JavaScript之排他思想

最新推荐文章于 2024-05-05 16:12:15 发布

一枚平平无奇的冲浪者

最新推荐文章于 2024-05-05 16:12:15 发布

阅读量360

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45272615/article/details/120401562

版权

什么是排他思想？

顺序一定不能颠倒

例：有5个按钮，当点击某一个按钮时，改变其背景颜色，

来实现此操作，第一想到的肯定是使用for循环，外加onclick点击事件，但是如果使用onclick function来实现的话，要写五次function，代码很繁琐，如果有很多个按钮，那实现起来真的想都不敢想，那么使用排他思想就会很快的实现。

js代码：

 <script>
        //获取按钮
        var btns = document.querySelectorAll("button")
        // console.log(btns)
        //for循环
        for (var i = 0; i < btns.length; i++) {
            //添加点击事件
            btns[i].onclick = function () {
                //排他思想   （干掉所有人，留下我自己）
                for (var i = 0; i < btns.length; i++) {
                    //干掉所有人  让所有的按钮背景颜色先去掉
                    btns[i].style.background = ''
                }
                //留下我自己   让点击的对应的按钮背景颜色为红色
                this.style.background = 'red'

            }

        }

    </script>