需求:点击一个按钮,自身改变样式,其他按钮恢复默认样式
1.万能排他思路：遍历每一个按钮，检查按钮下标是不是当前点击的下标
i:当前点击的下标
j:循环遍历所以兄弟
如果i==j,是自己,修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
/* 思路分析：点击每一个按钮 ： 排他思想修改样式（我自己样式改变，其他人样式恢复默认） */
//1.获取元素
let buttonList = document.querySelectorAll('button')
console.log(buttonList) //伪数组
//2.注册事件
//五个按钮都要注册事件，使用循环语句
for (let i = 0; i < buttonList.length; i++) {
//i = 0 1 2 3 4
//注册点击事件
buttonList[i].onclick = function () {
//3.事件处理
console.log(this) //事件源： 当前点击的按钮
console.log(i)//当前点击按钮的下标
/* 万能排他思路：遍历每一个按钮，检查按钮下标是不是当前点击的下标
i : 当前点击的下标
j:循环变量，会挨个遍历所有兄弟
i == j : 是自己，修改样式
*/
for(let j = 0;j<buttonList.length;j++){//j = 0 1 2 3 4
//判断是不是我点击的下标
if( i === j ){//下标一致，是自己
buttonList[j].style.backgroundColor = 'pink'
}else{//下标不一致，是其他人
buttonList[j].style.backgroundColor = ''
}
}
}
}
</script>
</body>
</html>
2.升级版排他思想
升级版排他思想:前提条件是修改类名来修改样式
(1)使用选择器选出唯一带有类名的元素,移除类名
(2)当前选中元素,添加类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.pink {
background-color: pink;
}
</style>
</head>
<body>
<button class="pink">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
/*
1.万能排他思想： 遍历所有元素。 如果是自己，则修改样式。 不是自己则恢复默认
2.升级版排他思想： 前提条件是需要使用类名修改样式
(1)先使用类选择器找出唯一的选中元素， 移除类名
(2)给自己添加类名
*/
//1.获取元素
let buttonList = document.querySelectorAll('button')
//2.遍历数组，给每一个按钮注册点击事件
for (let i = 0; i < buttonList.length; i++) {
buttonList[i].onclick = function () {
//i : 当前点击的元素下标 this:当前点击的元素
//3.升级排他思想
//3.1 直接用类选择器找出上一次选中的元素，移除样式
document.querySelector('.pink').classList.remove('pink')
//3.2 给自己设置样式
this.classList.add('pink')
}
}
</script>
</body>
</html>
