js中的排他思想

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

瓜生豆

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

阅读量162

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_62460148/article/details/131825640

版权

所谓的排他思想通俗来说就是我们去租房子，我们的房东要先帮我们将里面的住客清除掉，再让我们入住

下方五个按钮，我们给它们添加点击事件，来改变它们的样式

这是我们依次点击，会发现下方的情况，点击下一个按钮时上一个按钮没有恢复到点击之前的颜色

而我们需要的效果是点击其中一个按钮样式改变后其他的样式都要恢复原样，这个时候我们就要用到排他思想，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
    </div>
    <script>
        //获取所有按钮的元素集合，即<button>元素列表。
        let btn = document.querySelectorAll('button') 
        //使用forEach循环按钮元素
        btn.forEach(item=>{ 
        //给每一个button绑定onclick事件，这意味着按钮可以点击并且应用程序将调用该函数。 这
            item.onclick = function() { 
                console.log(this) //当前点击的按钮
                btn.forEach(val=>{
                    val.style.backgroundColor = '' //再次循环先将所有按钮恢复背景色
                })
                this.style.backgroundColor = 'yellow' //再给当前点击到的按钮的背景色设置为黄色 
            }

        })
    </script>
</body>
<style>
    button{
        width: 80px;
        height: 40px;
    }
</style>
</html>

瓜生豆

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js中的排他思想

所谓的排他思想通俗来说就是我们去租房子，我们的房东要先帮我们将里面的住客清除掉，再让我们入住。而我们需要的效果是点击其中一个按钮样式改变后其他的样式都要恢复原样，这个时候我们就要用到排他思想，代码如下。这是我们依次点击，会发现下方的情况，点击下一个按钮时上一个按钮没有恢复到点击之前的颜色。下方五个按钮，我们给它们添加点击事件，来改变它们的样式。
复制链接

扫一扫