Web API-排他思想及其案例

最新推荐文章于 2022-08-14 09:26:23 发布

crystal_iwwish

最新推荐文章于 2022-08-14 09:26:23 发布

阅读量126

点赞数

分类专栏：前端学习之Web API 文章标签： css html html5

本文链接：https://blog.csdn.net/crystal_iwwish/article/details/120639151

版权

前端学习之Web API 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

通过循环将其他元素调整为B状态，通过this或者下标将当前元素调整为A状态

案例-按钮切换（只允许一个按钮有背景颜色）

在这里插入图片描述

<style>
 .pink {
        background: orangered;
      }
 </style>


<body>
            <button>第1个</button>
            <button>第2个</button>
            <button>第3个</button>
            <button>第4个</button>
            <button>第5个</button>
 </body>

<script>
let btn = document.querySelectorAll("button");
      for (let i = 0; i < btn.length; i++) {
        btn[i].addEventListener("click", function () {
         //第一种方法
          for (let j = 0; j < btn.length; j++) {
            btn[j].classList.remove("pink");
          }
          //第二种方法（排他思想的优化）        
          document.querySelectorAll(".pink").classList.remove("pink");
          this.classList.add("pink");
        });
      }
</script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

crystal_iwwish

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web API-排他思想及其案例

通过循环将其他元素调整为B状态，通过this或者下标将当前元素调整为A状态案例-按钮切换（只允许一个按钮有背景颜色）<style> .pink { background: orangered; } </style><body> <button>第1个</button> <button>第2个</button> .
复制链接

扫一扫