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

最新推荐文章于 2024-05-05 16:12:15 发布

foursecond

最新推荐文章于 2024-05-05 16:12:15 发布

阅读量1k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49915090/article/details/123599355

版权

排他思想（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 中所有的 li
    var 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>

foursecond

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
排他思想（Js代码实现，有经典案例）

排他思想（js实现)如果有同一组元素，外卖想要某一个元素实现某种样式，需要用到循环的排他思想算法：所有元素全部清空样式（干掉其他人）给当前元素设置样式（留下自己）注意顺序不能颠倒，首先干掉其他人，再设置自己代码实现：<button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><but
复制链接

扫一扫