WebApi之排他思想(3种方法)

最新推荐文章于 2022-04-28 22:19:16 发布

头发保护协会会长

最新推荐文章于 2022-04-28 22:19:16 发布

阅读量292

点赞数 2

分类专栏： WebApi 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45786584/article/details/106290609

版权

WebApi 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

WebApi——排他思想(3种方法)

排他思想的3种方式(由易到难，js效率逐渐提高，拖拽自己的思路)

第一种思路：好理解，代码效率不高 (存在重复设置)

<body>
    <button>哼哼</button>
    <button>哼哼</button>
    <button>哼哼</button>
    <button>哼哼</button>
    <button>哼哼</button>
    <script>
        //1.获取元素
        var buttonList = document.querySelectorAll('button');
        //2.注册点击事件
        for (var i = 0; i < buttonList.length; i++) {
            buttonList[i].onclick = function () {
                //3.1 先无条件的把所有按钮的样式全部取消
                for (var j = 0; j < buttonList.length; j++) {
                    buttonList[j].style.backgroundColor = '';
                };
                //3.2 设置this的样式
                this.style.backgroundColor = 'pink';
            };
        };
    </script>
</body>

第二种思路：不好理解，代码效率高

<body>
    <button>哼哼</button>
    <button>哼哼</button>
    <button>哼哼</button>
    <button>哼哼</button>
    <button>哼哼</button>
    <script>
        //1.获取元素
        var buttonList = document.querySelectorAll('button');
        //2.注册点击事件
        for (var i = 0; i < buttonList.length; i++) {
            buttonList[i].onclick = function () {
                //排他思想 ： 遍历每一个按钮，判断这个按钮与this是不是同一个
                for (var j = 0; j < buttonList.length; j++) {
                    if (buttonList[j] == this) {//是自己
                        buttonList[j].style.backgroundColor = 'pink';
                    } else {//不是自己
                        buttonList[j].style.backgroundColor = '';
                    };
                };
            };
        };
    </script>
</body>

第三种思路：不好理解，代码效率最高

<body>
    <button>哼哼</button>
    <button>哼哼</button>
    <button>哼哼</button>
    <button>哼哼</button>
    <button>哼哼</button>
    <script>
        //1.获取元素
        var buttonList = document.querySelectorAll('button');
		//声明一个全局变量
        var flag = null;
        //2.注册点击事件
        for (var i = 0; i < buttonList.length; i++) {
            buttonList[i].onclick = function () {
                //因为null转布尔值为false，所以第一次不会执行if里面的代码，当第二次点击按钮的时候，flag的值会转true，(8种值会转换为false，分别是：0，-0，null，undefined，NaN，false，''，document.all()，其余一切数据都转true)会把上次点击的按钮的变色效果去除
                if(flag)
                flag.style.backgroundColor = '';
                //当前点击的按钮变色
                this.style.backgroundColor = 'pink';
                //把当前的按钮赋值给flag
                flag = this;
            };
        };
    </script>
</body>

头发保护协会会长

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
WebApi之排他思想(3种方法)

WebApi——排他思想(3种方法)排他思想的3种方式(由易到难，js效率逐渐提高，拖拽自己的思路) 第一种思路：好理解，代码效率不高 (存在重复设置)<body> <button>哼哼</button> <button>哼哼</button> <button>哼哼</button> <button>哼哼</button> <button&gt
复制链接

扫一扫

专栏目录