Qu'est-ce que la pensée exclusive ? En termes simples, tuez tout le monde et laissez-moi tranquille, ou en d'autres termes, tuez tout le monde avec eux-mêmes, puis créez vous-même une armure de résurrection, puis utilisez du code pour démontrer
Table des matières
Premièrement : le cadre, ici nous ajoutons d'abord 5 boutons
La deuxième étape : le code js pour obtenir l'élément
Étape 3 : Ajouter un événement de clic
Premièrement : le cadre, ici nous ajoutons d'abord 5 boutons
<!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>
La deuxième étape : le code js pour obtenir l'élément
<!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>
Étape 3 : Ajouter un événement 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>
Dans ce cas, notre but est d'ajouter un événement click à chaque bouton, mais queryselectorall a un point clé. Ce qu'il obtient est un pseudo-tableau, donc ce que nous avons écrit est faux, nous devons utiliser la boucle for pour parcourir chaque élément .
Étape 4 : Modifier
<!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 cette façon, un événement de clic est ajouté avec succès à chaque bouton, puis nous ajoutons un clic pour changer la couleur d'arrière-plan de ces boutons.
Étape 5 : Ajouter des 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>
Vous verrez que j'ai cliqué sur 2 boutons, mais les deux boutons sont rouges, ce qui n'est évidemment pas l'effet que nous voulons, donc nous devons utiliser la pensée exclusive pour écrire
Étape 6 : Exclusivité
Pour faire simple, l'idée d'exclusivité est de tuer tout le monde et de me quitter, ou en d'autres termes, de tuer tout le monde avec soi-même, puis de créer une armure de résurrection par vous-même, vous devez vous rappeler que l'ordre ne peut pas être inversé, d'abord clair tous les styles, puis Configurez-vous. Effacer tous les styles, comment pouvons-nous effacer tous les styles, donc ici nous devons utiliser la boucle for pour traverser pour effacer les styles pour chaque élément
<!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 cette façon, l'effet que nous voulions a été atteint.Ici, pour la commodité de l'observation, j'ai ajouté un fond jaune à chaque élément.
