JavaScript排他思想

排他思想:

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>

 

 

阅读剩余
THE END