编程思维---排他思想

金凯枫

于 2022-10-13 10:58:46 发布

1002

文章标签： html 前端 javascript css css3

本文链接：https://blog.csdn.net/m0_73596760/article/details/127295107

版权

排他思想:就是排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除再设置当前元素。

大白话---简单总结:干掉兄弟,复活自己

使用场景:1.Tab栏效果切换 2. 轮播图下方高亮小圆点 3.按钮的选择 4.一组同类便签中(如li标签,span标签,div标签),其中一个便签需要实现某一个样式.就可以使用 for循环清除所需要的样式,再添加自己需要的样式

排他思想步骤:1.获取元素-------利用for循环获取

利用事件委托(冒泡原理)

2.注册事件(常见的事件:鼠标事件,键盘事件,焦点事件,文本事件)

3.所有元素清除样式（干掉其他人）

4.给当前元素设置样式（留下我自己）

注意点:顺序不能颠倒(先移除,后添加)

举例子如下:

<body>
  <div class="domestic">
    <div class="clearfix">
      <span class="active" data-id="0">登高踏青</span>
      <span data-id="1">小憩温泉</span>
      <span data-id="2">天然氧吧</span>
      <span data-id="3">草原撒欢</span>
    </div>
  </div>

  <script>
    
    /* 
    思路分析：事件源：span 
             事件类型：点击事件 click
             事件处理程序 排他思想
    */
     //获取元素
   const span = document.querySelectorAll('span')
     //利用for循环  
   for(let i = 0; i<arr.length; i++) {
     // console.log(i)
     //注册事件
   span[i].addEventListener('click',function(){
     //排他思想 先移除
   document.querySelector('.active').classList.remove('active')
     //再添加
   span[i].classList.add('active')
    })
   }
  </script>

特殊情况没有要移除的样式,但是我们要添加我们想要的样式如下

不允许改变结构的情况下,可以想象的有这个样式,按照排他思想走下去 ,但是这里就得加判断了

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style-type: none;
        }

        .parentWrap {
            width: 200px;
            text-align: center;
            margin: 50px auto auto;

        }

        .menuGroup {
            border: 1px solid #999;
            background-color: green;
        }

        .groupTitle {
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        .menuGroup>div {
            height: 200px;
            background-color: #fff;
            display: none;
        }

        /* 注意看这里，可以采用类名的形式直接实现 */
        /* 思路： 点哪个 li ，哪个 li 添加 active 这个类，其余 li移除类 */
        .parentWrap .active span {
            /* 如果li添加active类，则 span 就改为红色 */
            background-color: red;
        }

        .parentWrap .active div {
            /* 如果当前li 添加 active 类，则 里面的div 就显示 */
            display: block;
        }
    </style>

</head>

<body>
    <ul class="parentWrap">
        <li class="menuGroup">
            <span class="groupTitle">标题1</span>
            <div>我是弹出来的div1</div>
        </li>


        <li class="menuGroup">
            <span class="groupTitle">标题2</span>
            <div>我是弹出来的div2</div>
        </li>


        <li class="menuGroup">
            <span class="groupTitle">标题3</span>
            <div>我是弹出来的div3</div>
        </li>

        <li class="menuGroup">
            <span class="groupTitle">标题4</span>
            <div>我是弹出来的div4</div>
        </li>
    </ul>
    <script>
        /* 
        思路分析:
             事件源 :li
             事件类型 : 点击事件
             事件处理程序 : 颜色变红  位置发生变化
             利用事件委托
        */
        //获取元素
        const list = document.querySelectorAll('li')
        //遍历
        for (let i = 0; i < list.length; i++) {
            //注册事件
            list[i].addEventListener('click', function () {
                // 先 移除 在添加
                const ac = document.querySelector('.active')
                //如果没有active这个类   不移除 也不会报错
                if (ac) {
                    ac.classList.remove('active')
                }
                //当前追加 active
                this.classList.add('active')
            })
        }
    </script>

</body>

</html>

总结:排他思想,先移除样式,在添加样式(顺序不能反)