排他思想
-
含义：多个元素，单次选择只能选中一个元素
-
方法
-
循环排他（炸弹）：
（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进行隐藏和显示，以上两种方式都可以完成 -
页面的布局：
在这里插入图片描述
开关思想
-
原理：
判断数组中是否所有元素，都满足条件
-
步骤：
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 } }
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
