排他思想.

最新推荐文章于 2024-08-09 10:42:44 发布

Hi_qing

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量95

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Hi_qing/article/details/125415328

版权

这篇博客介绍了如何使用JavaScript实现排他思想，即点击元素时清除其他元素样式并给当前元素设置样式。通过循环遍历按钮或图片元素，绑定点击事件，实现点击某一按钮或图片时，其背景色改变，其他元素样式恢复默认。同时，还以百度换肤为例，展示了点击图片更改页面背景的实现方法，通过获取点击图片的src作为body的背景图片。

摘要由CSDN通过智能技术生成

如果有同一组严肃,我饿么想要某一个元素实现某种样式,需要用到循环的排他思想算法:

1.所有元素全部清除样式(干掉其他人)

2.给当前元素设置样式(留下我自己)

3.注意顺序不能颠倒,首先干掉其他人,再设置自己

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
  
  // 1.获取元素
        var btns = document.querySelectorAll('button')
        // 2. 循环遍历绑定事件
        for (var i = 0; i < btns.length; i++) {

            //onclick 当点击的时候,才会执行function内部代码
            //这里btns[i]表示给每一个按钮绑定事件
            // 3. 编写事件处理程序
            btns[i].onclick = function () {

                //1.先清空所有样式  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = ''
                }
                //2. 复活/留下  我自己
                this.style.backgroundColor = 'pink'
            }
        }
</script>

eg. 百度换肤

分析：

这个案例练习的是给一组元素注册事件
点击每张图片给图片加个带颜色的border边框，实现排他思想
给4个小图片利用循环注册点击事件
当我们点击了这个图片，让我们页面背景改为当前的图片
核心算法：把当前图片的src 路径取过来，给 body 做为背景即可

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // 2. 先干掉其他人
                for (var j = 0; j < imgs.length;j ++) {
                    imgs[j].style.border = ''
                }
                // 3. 留下我自己
                this.style.border = '2px solid pink'
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage =  `url(${this.src})`;
            }
        }
    </script>
</body>