JavaScript中的排他算法实现按钮单选
案例池子：
演示效果
概述
简介：通过排他算法，我可以实现每次点击按钮，然后只有一个会亮。
HTML框架
<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> </body>
JS逻辑
<script> // 1. 获取所有按钮元素 var btns = document.getElementsByTagName('button'); // btns得到的是伪数组 里面的每一个元素 btns[i] for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { // 首先把所有的按钮的背景颜色都设置为空 for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ''; } // 然后再设置被选中的按钮的颜色 this.style.backgroundColor = 'skyblue'; } } </script>
完整代码
<!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. 获取所有按钮元素 var btns = document.getElementsByTagName('button'); // btns得到的是伪数组 里面的每一个元素 btns[i] for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { // 首先把所有的按钮的背景颜色都设置为空 for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ''; } // 然后再设置被选中的按钮的颜色 this.style.backgroundColor = 'skyblue'; } } </script> </body> </html>
