JS 排他思想

最新推荐文章于 2024-04-22 13:58:05 发布

梁山好岗

最新推荐文章于 2024-04-22 13:58:05 发布

阅读量676

点赞数 2

文章标签： js css html javascript

本文链接：https://blog.csdn.net/weixin_44194049/article/details/103783287

版权

排他思想

排他思想
排他思想案例
- 总代码
- 排他思想讲解

排他思想

排他思想就是先排除所有元素（包括自身），然后再单独设置自身。

排他思想案例

总代码

下面是一段“隔行变色”的总代码，代码中有用到排他思想。


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .box {
            width: 300px;
            margin: 100px auto;
        }
        li {
            height: 30px;
            font: 400 15px/30px "simsun";
        }
        .current {
            background-color: red!important;
        }
    </style>
</head>
<body>

<div class="box">
    <ul>
        <li>上证指数   3651.77    +   9.30</li>
        <li>深证成指   13139.12   +   110.82</li>
        <li>恒生指数   21830.02   +   38.34</li>
        <li>腾安指数   2696.29    +   23.62</li>
        <li>上证指数   3651.77    +   9.30</li>
        <li>深证成指   13139.12   +   110.82</li>
        <li>恒生指数   21830.02   +   38.34</li>
        <li>腾安指数   2696.29    +   23.62</li>
    </ul>

</div>

<script>
    //需求：隔行变色，鼠标放上去，还变色。
    //步骤：
    //（隔行变色）
    //1.获取事件源
    //2.绑定事件
    //3.书写事件驱动程序
        //（1）.鼠标放在谁上面，谁更改标签中class属性值（排他思想）

    //1.获取事件源
    var arrLi = document.getElementsByTagName("li");

        //这个for循环是隔行变色（遍历数组）
    for(var i=0; i<arrLi.length; i++) {
        if (i % 2 == 0) {
            arrLi[i].style.backgroundColor = "#ccc";
        }
//        else{
//            arrLi[i].style.backgroundColor = "#333";
//        }

    }

    //这个for循环是给li绑定事件用的
    for(var i=0; i<arrLi.length; i++){
        //2.绑定事件
        arrLi[i].onmouseover = function () {

            //这个for循环是给li清楚类名用的（排他思想，for）
            for(var j=0; j<arrLi.length; j++){
                arrLi[j].className = "";
//              alert(j);
            }

            this.className = "current";
        }
    }
    //3.书写事件驱动程序
    //（1）.鼠标放在谁上面，谁更改标签中class属性值
</script>

</body>
</html>

排他思想讲解

上述总代码中运用到排他思想的是

            for(var j=0; j<arrLi.length; j++){
                arrLi[j].className = "";
            }

            this.className = "current";

这里先用for循环把数组arrli中的样式清空，然后用this单独给这个元素附加样式，这样就可以在每次执行这个函数时，先取消上次执行这个函数给的样式，保证只有一个元素（本元素）得到样式。

梁山好岗

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS 排他思想

排他思想排他思想排他思想案例总代码排他思想讲解排他思想排他思想就是先排除所以元素（包括自身），然后再单独设置自身。排他思想案例总代码下面是一段“隔行变色”的总代码，代码中有用到排他思想。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <t...
复制链接

扫一扫