JavaScript排他思想

云言 • 2022-07-15 • 前端开发 • 248 阅读

排他思想:

1、干掉所有人，设置我自己，先将所有人全设置为"",然后再设置当前的值

2、含义： 关于排他思想，我的理解就是先排除掉其他的(包括自己) ，最后再给自己(this)加想要的效果。

2、小思路：

a. 通过document.querySelectAll();选择需要的一类标签,获得一个伪数组

b.由于是伪数组的原因，而对数组的处理最多的是遍历，所以会用到for(); 通过循环可以排除掉其他（包括自己）

c.遍历后可以用this改变自己的样式

3、代码如下：

<!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>
</head>
<body>
    <button>哈哈</button>
    <button>哈哈</button>
    <button>哈哈</button>
    <button>哈哈</button>
    <button>哈哈</button>
    <script>
        //获得一类button标签，得到伪类数组
        let buttonList = document.querySelectorAll('button');
        /*
        由于是伪数组的原因，而对数组的处理最多的是遍历，
        所以会用到for(); 通过循环可以排除掉其他（包括自己）
        */
        for(let i = 0;i<buttonList.length;i++){
            //给每个button加点击事件
            buttonList[i].onclick = function(){
                //通过循环可以排除掉其他（包括自己）
                for(let j = 0;j<buttonList.length;j++){
                    buttonList[j].innerText = '哈哈';
                    buttonList[j].style.backgroundColor = '';
                }
                //遍历后可以用this改变自己的样式
                this.innerText = '嘻嘻';
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>
</html>

 

 

|| 版权声明
作者：云言
链接：https://yyink.cn/archives/266.html
声明：如无特别声明本文即为原创文章仅代表个人观点，版权归《云言博客》所有，欢迎转载，转载请保留原文链接。
THE END
分享
二维码
海报
JavaScript排他思想
排他思想: 1、干掉所有人，设置我自己，先将所有人全设置为"",然后再设置当前的值 2、含义： 关于排他思想，我的理解就是先排除掉其他的(包括自己) ，最后再……
<<上一篇
下一篇>>