JS中常见的排他思想本文主要介绍javaScript中的Api，主要讲述了排他思想和开关思想，主要是以案例的形式讲解。大

排他思想

含义：多个元素，单次选择只能选中一个元素

方法

循环排他（炸弹）：

（1）循环干掉所有的兄弟（通过遍历数组，给所有元素去除）

（2）复活自己（在单独给选中的标签增加）

案例：

 <style>
     .Box {
       width: 240px;
       border: 1px solid #000;
       margin: 100px auto;
       padding: 20px;
     }
 
     .con {
       width: 100%;
       height: 200px;
       background-color: #cccccc;
       border: 1px solid #000;
       margin-top: 10px;
       display: none;
     }
 
     .current {
       background-color: pink;
       border: 2px black solid;
     }
   </style>
 </head>
 
 <body>
   <div class="Box" id="box">
     <button>按钮1</button>
     <button>按钮2</button>
     <button>按钮3</button>
     <button>按钮4</button>
     <div class="con" style="display:block">内容1</div>
     <div class="con">内容2</div>
     <div class="con">内容3</div>
     <div class="con">内容4</div>
   </div>
 
   <script>
     /* 
       tab栏切换思路 = 两个排他思想
       */
     let btns = document.querySelectorAll('button')
     let cons = document.querySelectorAll('.con')
     for (let i = 0; i < btns.length; i++) {
       btns[i].onclick = function () {
         // 1.全部销毁
         for (let j = 0; j < btns.length; j++) {
           btns[j].style.backgroundColor = ''
           cons[j].style.display = 'none'
         }
         this.style.backgroundColor = 'pink'
         cons[i].style.display = 'block'
       }
     }
   </script>

类名排他（狙击枪）：

（1）通过类名干掉选中的的兄弟（选中有单独类名的元素标签，给他去除）

（2）复活自己（给点击的按钮增加刚去除的元素类名）

 <style>
     .Box {
       width: 240px;
       border: 1px solid #000;
       margin: 100px auto;
       padding: 20px;
     }
 
     .con {
       width: 100%;
       height: 200px;
       background-color: #cccccc;
       border: 1px solid #000;
       margin-top: 10px;
       display: none;
     }
 
     .current {
       background-color: pink;
       border: 2px black solid;
     }
 
     .btn1 {
       background-color: pink;
     }
 
     .bl {
       display: block;
     }
   </style>
 </head>
 
 <body>
   <div class="Box" id="box">
     <button class="btn1">按钮1</button>
     <button>按钮2</button>
     <button>按钮3</button>
     <button>按钮4</button>
     <div class="con bl">内容1</div>
     <div class="con">内容2</div>
     <div class="con">内容3</div>
     <div class="con">内容4</div>
   </div>
 
   <script>
     // 1.获取元素
     let btns = document.querySelectorAll('button')
     let cons = document.querySelectorAll('.con')
     for (let i = 0; i < btns.length; i++) {
     // 2.注册事件
       btns[i].onclick = function () {
     // 3.事件处理  给有这个类名的元素清除这个类名
         document.querySelector('.btn1').classList.remove('btn1')
         document.querySelector('.bl').classList.remove('bl')
     //给点击的这个元素增加类名
         this.classList.add('btn1')
         cons[i].classList.add('bl')
       }
     }
   </script>

Tab栏切换

原理：都是采用排他思想完成，在排他思想的基础上，使用display进行隐藏和显示，以上两种方式都可以完成
页面的布局：

排他思想图片举例.png

开关思想

原理：

判断数组中是否所有元素，都满足条件
步骤：

a. 声明开关变量：一般默认值为true

b. 遍历数组：检查开关是否成立，如果不成立，立即修改开关变量为false，并结束循环。

c. 获取开关变量

案例：

   //需求1： 判断数组中是否所有元素都大于0
         //都大于0 ： 打印true   不是都大于0： false
         let arr = [20, 30, 1, 50, 32, 4, -1]
         let str = true
         for (let i = 0; i < arr.length; i++) {
             if (arr[i] < 0) {
                 str = false
                 break
             }
         }
         console.log(str)

购物车勾选案例:

   // 1.获取元素
     let ctrl = document.querySelector('#checkAll')
     let opt = document.querySelectorAll('.check')
     // 检查获取元素是否成功
     console.log(ctrl, opt)
     // 注册事件
     ctrl.onclick = function () {
       // 将全选框的选项赋值给下面的单个小按钮
       for (let i = 0; i < opt.length; i++) {
         opt[i].checked = ctrl.checked
       }
     }
     // 每点击一次下面的小按钮就执行
     for (let i = 0; i < opt.length; i++) {
       opt[i].onclick = function () {
         // 利用开关思想，先声明一个开关元素，只要有一个不符合，就全部不符合
         // 事件处理
         let flag = true
         for (let j = 0; j < opt.length; j++) {
           // 对下面的按钮元素判断，判断是否全部为false
           if (!opt[j].checked) {
             flag = false
           }
         }
         // 将开关变量的布尔值直接给全选按钮
         ctrl.checked = flag
       }
     }