¿Qué es el pensamiento exclusivo? En pocas palabras, mata a todos y déjame en paz, o en otras palabras, mata a todos con ellos mismos, y luego crea una armadura de resurrección por ti mismo, y luego usa el código para demostrar
Tabla de contenido
Primero: marco, aquí agregamos 5 botones primero
El segundo paso: código js para obtener el elemento.
Paso 3: Agregar un evento de clic
Primero: marco, aquí agregamos 5 botones primero
<!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>
El segundo paso: código js para obtener el elemento.
<!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>
Paso 3: Agregar un evento de clic
<!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>
En este caso, nuestro propósito es agregar un evento de clic a cada botón, pero queryselectorall tiene un punto clave: lo que obtiene es una pseudo matriz, por lo que lo que escribimos está mal, necesitamos usar el bucle for para recorrer cada elemento. .
Paso 4: Modificar
<!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>
De esta forma, se agrega con éxito un evento de clic a cada botón y luego agregamos un clic para cambiar el color de fondo de estos botones.
Paso 5: Agregar estilos
<!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>
Verá que hice clic en 2 botones, pero ambos botones están rojos, lo que obviamente no es el efecto que queremos, por lo que tenemos que usar el pensamiento exclusivo para escribir
Paso 6: Exclusividad
En pocas palabras, la idea de exclusividad es matar a todos y dejarme a mí mismo, o en otras palabras, matar a todos con ellos mismos, y luego crear una armadura de resurrección por ti mismo, debes recordar que el orden no se puede revertir, primero claro todos los estilos y, a continuación, Configúrese. Borrar todos los estilos, ¿cómo podemos borrar todos los estilos, así que aquí necesitamos usar for loop para atravesar para borrar estilos para cada elemento?
<!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>
De esta forma se ha conseguido el efecto que buscamos, aquí para comodidad de observación he añadido un fondo amarillo a cada elemento.
