前端小白学习之排他思想

AlongSunsea丶

于 2022-08-29 18:09:52 发布

阅读量502

点赞数 3

文章标签：学习前端 html css javascript

本文链接：https://blog.csdn.net/qq_60391201/article/details/126589189

版权

应用场景：当有多个同类供选择的元素，我们需要选择其中一个，改变其样式，就要用到排他思想。

排他顾名思义就是先排除其他的，再保留自己的。注意顺序不能更换！

实现：利用for循环，将所有的同类样式，都清除掉（恢复默认样式），再在for循环外面，给选择的元素修改样式，实现排他效果。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排他思想</title>
    <style>
        .chooseWrap{
            margin: 0 auto;
            width: 600px;
        }
        .chooseWrap dl {
            margin-top: 13px;
            margin-bottom: 13px;
        }

        .chooseWrap dl::after {
            clear: both;
            display: block;
            content: '';
        }

        .chooseWrap dl dt {
            margin-right: 15px;
            float: left;
        }

        .chooseWrap dl dd {
            cursor: pointer;
            float: left;
            margin-right: 5px;
            color: #666;
            line-height: 24px;
            padding: 2px 14px;
            border-top: 1px solid #eee;
            border-left: 1px solid #eee;
            border-right: 1px solid #bbb;
            border-bottom: 1px solid #bbb;
        }

        .chooseWrap dl dd:first-of-type {
            color: red;
        }
    </style>
</head>

<body>
    <div class="chooseWrap">
        <dl>
            <dt>选择颜色</dt>
            <dd>金色</dd>
            <dd>银色</dd>
            <dd>黑色</dd>
        </dl>
        <dl>
            <dt>内存容量</dt>
            <dd>16G</dd>
            <dd>64G</dd>
            <dd>128G</dd>
        </dl>
        <dl>
            <dt>选择版本</dt>
            <dd>公开版</dd>
            <dd>移动版</dd>
        </dl>
        <dl>
            <dt>购买方式</dt>
            <dd>官方标配</dd>
            <dd>优惠移动版</dd>
            <dd>电信优惠版</dd>
        </dl>
    </div>

    <script>
        window.onload = function(){
            
            (function clickBind(){
                /*
                    思路
                    1.获取所有dl元素，取其中第一个dl元素下的dd先做测试
                    2.循环所有dd元素并且添加点击事件
                    3.确定实际发生事件的目标源对象设置其文字颜色为红色，然后给其他是所有的元素都重置基础颜色
                */ 

                // 1.找第一个dl下的所有dd元素
                let dlNodes = document.querySelectorAll('.chooseWrap dl');
                // console.log(dlNodes);

                
                // console.log(ddNodes);
                for(let k=0;k<dlNodes.length;k++){
                    let ddNodes=dlNodes[k].querySelectorAll('dd');
                    // 2.遍历当前所有的dd元素
                    for(let i = 0;i<ddNodes.length;i++){
                        ddNodes[i].onclick = function(){
                            for(let j = 0;j<ddNodes.length;j++){
                                ddNodes[j].style.color = "#666";
                            }
                            this.style.color = "red";
                        } 
                    }
                }

            })();

        }
    </script>
</body>

</html>

ps：如果选择后需要修改的样式较多也可以新加类名，在css中写好样式，再用排他思想，for循环清除类名，最后给选择的元素加上类名。