js排他思想算法点击按钮案例分析附代码教程

如果有同一组元素,我们想要某一个元素实现某种样式 ,需要用到循环的排他思想算法:
1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式(留下我自己)
3.注意顺序不能颠倒,首先干掉其他人,再设置自己
案例代码：

1. <button>按钮</button>
   
2.     <button>按钮</button>
   
3.     <button>按钮</button>
   
4.     <button>按钮</button>
   
5.     <button>按钮</button>
   
6.     <button>按钮</button>
   
7.     <script>
   
8.         var btn = document.querySelectorAll('button');
   
9.         for (var i = 0; i < btn.length; i++) {
   
10.             btn[i].onclick = function() {
    
11.                 for (i = 0; i < btn.length; i++) {
    
12.                     btn[i].style.backgroundColor = '';
    
13.                 }
    
14.                 this.style.backgroundColor = 'red';
    
15.             }
    
16.         }
    
17.     </script>

复制代码

案例输出结果如图所示：

js排他思想算法点击按钮案例分析附代码教程