JavaScript的第八天-优快云博客

本文链接：https://blog.youkuaiyun.com/Jourkern/article/details/143234072

一、排他思想（算法）

        排他思想在本身逻辑上为单独突出，但在计算机的程序运行中无法理解这种逻辑顺序，而我们需要在一定程度上去模拟这个逻辑的过程，运用程序的高速运行去达成我们需要的效果。

即在我们理解中的排他思想为在多个目标中的一个目标的不一致

        程序中可以进行以下思路的解析：

        在程序运行中使所有程序都处于一个同样的状态，然后再提出我们需要的那个值，造成单独的状态，伪排他状态

        （具体的定义为：首先先排除其他人，然后才设置自己的样式这种排除其他人的思想我们称为排他思想）

代码展示和解析

先寻找点击对象，再确定对象后我们将所有的属性进行统一操作保证样式一致，最后再对需要改变的属性进行单独操作来添加样式完成排他思想

<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            display: flex;
            width: 720px;
            margin: 50px auto;
        }

        ul>li {
            list-style: none;
            width: 70px;
            height: 50px;
            font-size: 30px;
            background-color: #ccc;
            color: #000;
            margin: 10px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }

        li.bg {
            background-color: #0f0;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul>
        <li class="bg">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <script>
        var lis = document.querySelectorAll("li")
        //lis得到的是伪数组，具有伪数组的特性，无法使用api，但是可以调取其 length 值

        for (var i = 0; i < lis.length; i++)
        //遍历lis伪数组，得到每一个数组元素的值
        
         {
            lis[i].onclick = function () 
          //给每一个数组元素添加点击事件和事件处理程序

            {
                //再创建一个循环来遍历数组，并使所有元素为同一属性
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = ""
                }

                //此时再对我们需要的属性修改样式
                console.log(this);
                this.className = "bg"
            }
        }

    </script>
</body>