What is exclusive thinking? Simply put, kill everyone and leave me alone, or in other words, kill everyone with themselves, and then create a resurrection armor by yourself, and then use code to demonstrate
Table of contents
First: frame, here we add 5 buttons first
The second step: js code to get the element
First: frame, here we add 5 buttons first
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
</script>
</html>
The second step: js code to get the element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var btns = document.querySelectorAll('button')
</script>
</html>
Step 3: Add a click event
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var btns = document.querySelectorAll('button')
btns.onclick = function(){
}
</script>
</html>
In this case, our purpose is to add a click event to each button, but queryselectorall has a key point. What he gets is a pseudo-array, so what we wrote is wrong, we need to use the for loop to traverse each element.
Step 4: Modify
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var btns = document.querySelectorAll('button')
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
}
</script>
</html>
In this way, a click event is successfully added to each button, and then we add a click to change the background color of these buttons.
Step 5: Add Styles
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var btns = document.querySelectorAll('button')
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
this.style.backgroundColor = 'red'
}
}
</script>
</html>
You will see that I clicked 2 buttons, but both buttons are red, which is obviously not the effect we want, so we have to use exclusive thinking to write
Step 6: Exclusivity
To put it simply, the idea of exclusivity is to kill everyone and leave myself, or in other words, kill everyone with themselves, and then create a resurrection armor by yourself, you must remember that the order cannot be reversed, first clear all styles, and then Set yourself up. Clear all styles, how can we clear all styles, so here we need to use for loop to traverse to clear styles for each element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var btns = document.querySelectorAll('button')
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
for(var i=0;i<btns.length;i++){
btns[i].style.backgroundColor = 'yellow'
}
this.style.backgroundColor = 'red'
}
}
</script>
</html>
In this way, the effect we want has been achieved. Here, for the convenience of observation, I added a yellow background to each element.
