排他思想做法

2024-02-08 21:06:58

排他思想分为俩步骤
1.先给所有的元素绑定事件，而在吧所有的元素样式设置为同一种样式要使用到双for循环
2.在给当前自己设置样式，总结就是先干掉所有人除了自己

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .p1 {
            background-color: red;
        }
    </style>
</head>

<body>
    <p class="p1">1</p>
    <p class="p1">2</p>
    <p class="p1">3</p>
    <p class="p1">4</p>
    <script>
        // 要求某一个p，点击的这个p变成爽，其他变为哈哈
        var plist = document.querySelectorAll('p');
        for (var i = 0; i < plist.length; i++) {

            plist[i].index = i //这种方法也可以我们可以吧索引号存到对象里面，然后下面直接获取对象的属性值，获取到的对象属性值就是索引号，索引号对应的就是点击事件那个pl
                // 注意如果一旦事件添加在for循环当中，那个事件执行函数里面的代码刚开始在循环当中是不执行的直接给跳过了，在for循环结束后你点击或者移入后此时他才去执行函数里面的代码 那时候循环里面的i早就结束了为空得了，如果此时再去使用i，系统就会报错系统不知道该执行谁
            plist[i].onclick = function() { // 注意添加事件的时候，函数是不会去执行的，你只是绑定了 只有当你点击了之后函数才会去执行里面的代码，不点击就不会执行
                for (var j = 0; j < plist.length; j++) {
                    plist[j].innerHTML = '哈哈'
                }

                // 这里不能写成 plist[i]因为 当你点击的时候i已经变为4开始了，你未点击之前的时候 i早都已经循环执行完毕了 这时候如果再去使用 plist[i]设置，就会报错系统就会默认找不到你想给谁设置内容了。

                // 而这里的this就不一样了 你点的那个他就指向得那个
                // this.innerHTML = '爽'

                plist[this.index].innerHTML = '爽'
            }

        }
    </script>

</body>

</html>

码农公寓

相关文章