在JS的基础学习中,最经典的案例之一就是排他思想了,大家应该都玩过这个排他思想
本质就是双重for循环的的嵌套,实现排他的思想
我们今天利用案例来解释以下循环排他思想:
<!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>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
</body>
<script>
const btn = document.querySelectorAll('button')
//直接使用for循环,点击按钮让this当前按钮的颜色变为红色
for(let i = 0;i < btn.length;i++){
btn[i].onclick = function(){
//套二层for循环,使我们的点击按钮,先让所有按钮变为原色
//再让当前的按钮变色
for(let i = 0;i < btn.length;i++){
btn[i].style.backgroundColor = ''
}
this.style.backgroundColor = 'red'
}
}
</script>
</html>