JavaScript之排他算法

最新推荐文章于 2023-10-24 17:55:40 发布

码小虎

最新推荐文章于 2023-10-24 17:55:40 发布

阅读量335

点赞数 1

文章标签： javascript 算法 css3

本文链接：https://blog.csdn.net/qq_43105939/article/details/121760354

版权

问题列示

如下图，我们将实现如图的效果。
在这里插入图片描述

解决思路

首先可以看到当我们点击一个按钮后背景颜色会自动切换到我们所点击的按钮上。我们可以换一种想法来看待这个切换动作，我们将每个按钮都绑定一个点击事件，当我们点击任意一个按钮后，他把其他的按钮背景颜色去掉，最后再将自己设置一个背景颜色是不是就可以达到切换背景颜色的效果了。

代码列示

完整代码

<!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>Document</title>
    <style>
        ul{
            list-style: none;
        }
        li{
            float: left;
            margin:0px 2px;
        }
        button{
            background-color: rgb(223, 215, 215);
        }
    </style>
</head>
<body>
    <ul>
        <li><button>按钮1</button></li>
        <li><button>按钮2</button></li>
        <li><button>按钮3</button></li>
        <li><button>按钮4</button></li>
        <li><button>按钮5</button></li>
    </ul>
    <script>
        var but=document.querySelectorAll("button");//获取所有button元素；
        for(var i=0;i<but.length;i++){//循环为每个button元素添加点击事件
            but[i].onclick=function(){
                for(var j=0;j<but.length;j++){//去掉所有按钮的背景色
                    but[j].style.background="";
                }
                this.style.background="red";//设置自己的背景颜色
            }
        }
    </script>
</body>
</html>

代码分析

获取button所有元素。
我们可以使用but=document.querySelectorAll(“button”);获取所有的button元素，这个方法将返回一个伪数组里边包含了所有的button元素对象。
使用for循环为每个button元素添加点击事件。
具体代码看可以看第31行，利用for循环遍历伪数组获得单个button元素对象后再添加背景颜色具体代码36行。33,34,35行代码先省略掉我们先看看效果。

可以看到但点击按钮后并没有实现背景的切换效果。说明33,34,35行代码是关键所在。
使用for循环去掉所有元素的背景颜色（kill掉所有的元素的背景色）
我们来具体看看第33,34,35行代码，可以看到通过for循环从but伪数组中取出每个button对象然后把元素的背景颜色设置为空（这里就是去掉背景颜色）。我们把36行的代码注释掉看看运行效果。
可以看到当我我们点击按钮后并没有生任何变化。我们把34行的代码改成 but[j].style.backgroundColor=“green”;看效果是什么。

可以看到当我只点击了一个按钮时其他的按钮颜色也发生了变化说明了33行的for循环确实是设置所有的button背景颜色。
kill掉所有元素后再设置自己的背景色。
我们把36行的代码取消注释，可以看到这行代码是在for循环后的，这也说明当前面的for循环把所有元素背景去掉后再运行的此行代码，最终运行效果也就是我们想得到的效果了。

码小虎

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之排他算法

问题列示如下图，我们将实现这样的效果。图片解决思路首先可以看到当我们点击一个按钮后背景颜色会自动切换到我们所点击的按钮上。我们可以换一种想法来看待这个切换动作，我们将每个按钮都绑定一个点击事件，当我们点击任意一个按钮后，他把其他的按钮背景颜色去掉，最后再将自己设置一个背景颜色是不是就可以达到切换背景颜色的效果了...
复制链接

扫一扫