排他思想（Js代码实现，有经典案例）

排他思想（js实现)

如果有同一组元素，外卖想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清空样式（干掉其他人）
给当前元素设置样式（留下自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

代码实现：

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>// 获取所有的按钮元素var btns = document.getElementsByTagName("button");// btns 得到的是伪数组，里面的每一个元素btns[i]for (var i = 0; i < btns.length; i++) {btns[i].onclick = function () {// (1) 先把所有的按钮背景颜色去掉for (var j = 0; j < btns.length; j++) {btns[j].style.backgroundColor = "";}this.style.backgroundColor = "pink";// (2) 然后才让当前的元素背景颜色为pink};}
</script>

案例

所有案例只有html 和 js 部分, 没有在以下代码中写入 css 部分, 最主要的理解 js 部分代码实现的思路

表单全选取消全选案例

案例分析

全选和取消全选做法︰让下面所有复选框的checked属性（选中状态）跟随全选按钮即可

下面复选框需要全部选中，上面全选才能选中做法∶给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。

可以设置一个变量，来控制全选是否选中

代码实现：

<style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}
</style>
</head>
<body><div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll" /></th><th>商品</th><th>价钱</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>iPhone8</td><td>8000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Pro</td><td>5000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Air</td><td>2000</td></tr><tr><td><input type="checkbox" /></td><td>Apple Watch</td><td>2000</td></tr></tbody></table></div><script>// 全选按钮var j_cbAll = document.getElementById("j_cbAll");//  下面所有的复选框var j_tbs = document.getElementById("j_tb").getElementsByTagName("input");j_cbAll.onclick = function () {for (var i = 0; i < j_tbs.length; i++) {if (j_cbAll.checked === true) {j_tbs[i].checked = true;} else {j_tbs[i].checked = false;}}};for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].onclick = function () {var flag = true; //控制全选按钮是否选中// 每次点击下面的复选框都要循环检测4个小按钮是否全被选中for (var j = 0; j < j_tbs.length; j++) {if (!j_tbs[j].checked) {flag = false;}}j_cbAll.checked = flag;};}</script>

tab栏切换

案例分析

Tab栏切换有2个大的模块

上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变(排他思想）修改类名的方式

下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面

规律：下面的模块显示内容和上面的选项卡一一对应，相匹配

核心思路：给上面的tab_list里面的所有 li 添加自定义属性，属性值从0开始编号

当我们点击tab_list里面的某个小i,让tab_con里面对应序号的内客显示，其余隐藏〔排他思想)

代码实现：

<div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li></li><li>商品评价（50000）</li><li>手机社区</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介绍模块</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价（50000）模块内容</div><div class="item">手机社区模块内容</div></div>
</div>
<script>var tab_list=document.querySelector(".tab_list")// 获取 tab_list 中所有的 livar lis=tab_list.querySelectorAll("li")var items=document.querySelectorAll(".item")// for 循环绑定点击事件for(var i=0;i<lis.length;i++){// 设置索引号lis[i].setAttribute('index',i);lis[i].onclick=function(){// 1. 选项卡模块// 其余的 li 清楚 class 这个类for(var j=0;j<lis.length;j++){lis[j].className=""}// 留下自己（点击了谁就留下了谁）this.className="current"// 2. 显示内容模块var index=this.getAttribute("index")//  console.log(index);// 让其余的 item 这些 div 隐藏for(var k=0;k<items.length;k++){items[k].style.display="none"}// 留下自己 让对应的 item 显示出来items[index].style.display="block"}}
</script>

折叠手风琴

案例分析

将所有元素的类名修改为 .option

给当前的元素增加 .active 这个类

代码实现:

<div class="options"><div class="option active" style="--optionBackground: #b983ff" id="item1"><div class="shadow"></div></div><div class="option" style="--optionBackground: #94b3fd" id="item2"><div class="shadow"></div></div><div class="option" style="--optionBackground: #94daff" id="item3"><div class="shadow"></div></div><div class="option" style="--optionBackground: #99feff" id="item4"><div class="shadow"></div></div><div class="option" style="--optionBackground: #ffe652" id="item5"><div class="shadow"></div></div></div><script>var options = document.querySelectorAll(".option");for (var i = 0; i < options.length; i++) {options[i].onclick = function () {for (var j = 0; j < options.length; j++) {options[j].className = "option";}// 增加 .active 类名this.classList.add("active");};}</script>

排他思想（Js代码实现，有经典案例）相关推荐

js中递归函数的经典案例
javascript中递归函数的经典案例什么是递归函数? 关于递归的概念,我们都不陌生.简单的来说递归就是一个函数直接或间接地调用自身,是为直接或间接递归.一般来说,递归需要有边界条件.递归前进段和 ...
nuxt.js添加工具块 / js代码。Statcounter 分析器案例
在业务需求中,有一个需求是要添加SEO的网站点击分析器.选中了Statcounter分析器,但是由于官方给的代码形式案例如下 <script type="text/javascript ...
python3入门代码-Python3入门经典案例，不埋坑不踩雷.小白也可上手实操（附代码）...
希望通过这几道例题,让你能对python3的基础代码能力有一定的掌握. 例1:题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? sum=0for i in range ...
java斗地主代码花色,集合经典案例:斗地主发牌功能实现
importjava.util.ArrayList;importjava.util.Collections;importjava.util.HashMap;importjava.util.List;i ...
Python：利用python语言绘制多个子图经典案例、代码实现之详细攻略
Python:利用python语言绘制多个子图经典案例.代码实现之详细攻略目录利用python语言绘制多个子图代码实现.经典案例 1.绘制多个子图框架多个子图绘制的经典案例 1.绘制多个直方图 ...
排他思想与自定义属性
1.排他操作排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 所有元素全部清除样式(干掉其他人) 给当前元素设置样式 (留下我自己) 注意顺序不能颠倒,首先 ...
排他思想 -- 百度换肤效果案例以及点击某按钮只是该按钮变色
排他思想 – 百度换肤效果案例以及点击某按钮只是该按钮变色 1.百度换肤 <!DOCTYPE html> <html lang="en"> <he ...
JS经典案例-无缝滚动轮播图（纯JS）
滚动轮播图在JS初级阶段,轮播图是最基础最经典的案例,而相比于渐变轮播图,无缝滚动轮播图又要更难一点.渐变轮播图仅需要使用到点击事件.定时器等,而无缝滚动轮播图则需要考虑到第一张>最后一张, ...
TF学习：Tensorflow基础案例、经典案例集合——基于python编程代码的实现
TF学习:Tensorflow基础案例.经典案例集合--基于python编程代码的实现目录 Tensorflow的使用入门 1.TF:使用Tensorflow输出一句话 2.TF实现加法 3.TF实 ...

排他思想（Js代码实现，有经典案例）

排他思想（js实现)

案例

排他思想（Js代码实现，有经典案例）相关推荐

最新文章

热门文章

排他思想 （Js代码实现，有经典案例）

排他思想（js实现)

案例

排他思想 （Js代码实现，有经典案例）相关推荐

最新文章

热门文章

排他思想（Js代码实现，有经典案例）

排他思想（Js代码实现，有经典案例）相关推荐