JS JQuery中实现点击当前标签改变样式以及同时改变后几个标签的样式

于 2019-08-19 17:59:25 发布
阅读量4.9k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 大前端 文章标签： JS JQuery中实现点击当前节点改变样式以及后几个节点的样式 点击当前标签改变样式同时改变后两个的标签 跨域越界添加样式 addClass().siblings().removeClass() .next().next()
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42063951/article/details/99742258

第一种不跨域的：
我在移动端的开发中遇到了如下点击13：00标签改变其背景和圆角的同时后两个标签页同时改变了，点击22:00和22:30的越界了我给加了个toast弹窗（需要的话我推荐这个插件）。
在这里插入图片描述
我的思路是这样的：比如点击8:00，用id改变其样式这个都会，然后用.next()获取8：30的节点，用.next().next()获取10:00的节点，获取到了节点就可以用addClass添加样式，最后点击其他时间时用.siblings().removeClass来清理兄弟节点缓存的样式就好了。

整个HTML代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>跨域添加样式</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/toast.css"> -->
</head>
<style>
    html {
        font-size: 50px;
        width: 100%;
    }

    body {
        margin: 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .order-hd {
        background: #fff;
    }

    .order-body-top {
        background: rgb(181, 255, 212);
    }

    .order-body-top-div {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0.14rem 0;
    }

    .order-body-top-div ul {
        margin: 0.1rem 0rem;
        width: 25%;
        display: flex;
        justify-content: center;
    }

    .order-body-top-div ul li {
        width: 1rem;
        height: 0.4rem;
        font-size: 0.24rem;
        text-align: center;
        border-radius: 0.5rem;
        border: 1px solid #ddd;
        line-height: 0.41rem;
        padding: 0.1rem 0.2rem;
    }

    .click-time-style-left {
        background: #FA7097;
        color: #FFF;
        border-radius: 0.5rem 0 0 0.5rem;
    }

    .click-time-style-mid {
        background: #FA7097;
        color: #FFF;
    }

    .click-time-style-right {
        background: #FA7097;
        color: #FFF;
        border-radius: 0 0.5rem 0.5rem 0;
    }

    .click-time-style-left li {
        border: 1px solid #FA7097 !important;
    }

    .click-time-style-mid li {
        border: 1px solid #FA7097 !important;
    }

    .click-time-style-right li {
        border: 1px solid #FA7097 !important;
    }
</style>

<body>
    <div>
        <header class="order-hd">
            <div class="order-body">
                <!-- 时间 -->
                <div class="order-body-top">
                    <div class="order-body-top-div" id="timeID">
                        <!-- <ul>
                                <li></li>
                            </ul> -->
                    </div>
                </div>
            </div>
        </header>
    </div>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <!-- <script src="js/toast.js"></script> -->
    <script type="text/javascript">
        $(function () {
            //初始化时间
            let timeStr = "";
            let timeData = ["8:00", "8:30", "9:00", "9:30", "10:00", "10:30", "11:00", "11:30", "12:00",
                "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30",
                "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30"]
            for (let timeIndex in timeData) {
                timeStr += '<ul><li>' + timeData[timeIndex] + '</li></ul>';
            };
            $("#timeID").html(timeStr);
            $("#timeID ul").click(function () {
                let tabIndex = $(this).index();
                // console.log(tabIndex)
                //我获取了当前的index索引来判断点击的是不是到时第一二个节点，因为此时已经不符合需求了，少于3个节点了
                if (tabIndex < timeData.length - 2) {
                    //第一个节点
                    $(this).addClass("click-time-style-left ").siblings().removeClass("click-time-style-left ");
                    //第二个节点
                    $(this).next("ul").addClass("click-time-style-mid ").siblings().removeClass("click-time-style-mid ");
                    //第三个节点
                    $(this).next().next("ul").addClass("click-time-style-right ").siblings().removeClass("click-time-style-right ");
                } else {
                    window.alert("当前时间不可预约")
                    // // 这里我添加了toast弹窗，需要插件，默认忽略即可
                    // $('.order-body').toast({
                    //     content: '当前时间不可预约',
                    //     duration: 1600,
                    //     isCenter: false,
                    //     animateIn: 'bounceIn-hastrans',
                    //     animateOut: 'bounceOut-hastrans',
                    // });
                }
            })
        });
    </script>
</body>

</html>

第二种跨域的：
在这里插入图片描述

我的思路是这样的：我在时间数组循环到html的时候给每一个时间标签都添加一个有序id，要改变后面的样式直接id+1，id+2就好了，这样就不用懊恼.next()不能跨域的问题了。

控制台显示大概：
在这里插入图片描述
整个HTML代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>跨域添加样式</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/toast.css"> -->
</head>
<style>
    html {
        font-size: 50px;
        width: 100%;
    }

    body {
        margin: 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .order-hd {
        background: #fff;
    }

    .order-body-top {
        background: rgb(181, 255, 212);
    }

    .order-body-top-div {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0.14rem 0;
    }

    .order-body-top-div ul {
        margin: 0.1rem 0rem;
        width: 25%;
        display: flex;
        justify-content: center;
    }

    .order-body-top-div ul li {
        width: 1rem;
        height: 0.4rem;
        font-size: 0.24rem;
        text-align: center;
        border-radius: 0.5rem;
        border: 1px solid #ddd;
        line-height: 0.41rem;
        padding: 0.1rem 0.2rem;
    }

    .order-body-mid {
        background: rgb(220, 255, 181);
    }

    .order-body-bottom {
        background: rgb(255, 232, 181);
    }

    .click-time-style-left {
        background: #FA7097;
        color: #FFF;
        border-radius: 0.5rem 0 0 0.5rem;
    }

    .click-time-style-mid {
        background: #FA7097;
        color: #FFF;
    }

    .click-time-style-right {
        background: #FA7097;
        color: #FFF;
        border-radius: 0 0.5rem 0.5rem 0;
    }

    .click-time-style-left li {
        border: 1px solid #FA7097 !important;
    }

    .click-time-style-mid li {
        border: 1px solid #FA7097 !important;
    }

    .click-time-style-right li {
        border: 1px solid #FA7097 !important;
    }
</style>

<body>
    <div>
        <header class="order-hd">
            <div class="order-body">
                <!-- 上午 -->
                <div class="order-body-top">
                    <div class="order-body-top-div" id="forenoonID">
                        <!-- <ul>
                                <li></li>
                            </ul> -->
                    </div>
                </div>
                <!-- 下午 -->
                <div class="order-body-mid">
                    <div class="order-body-top-div" id="afternoonID">
                        <!-- <ul>
                                <li></li>
                            </ul> -->
                    </div>
                </div>
                <!-- 晚上 -->
                <div class="order-body-bottom">
                    <div class="order-body-top-div" id="nightID">
                        <!-- <ul>
                                <li></li>
                            </ul> -->
                    </div>
                </div>
            </div>
        </header>
    </div>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <!-- <script src="js/toast.js"></script> -->
    <script type="text/javascript">
        $(function () {
            //初始化时间
            let forenoonStr = "";
            let afternoonStr = "";
            let nightStr = "";
            let forenoonData = ["8:00", "8:30", "9:00", "9:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30"]
            let afternoonData = ["13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30"]
            let nightData = ["18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30"]
            for (let timeStr in forenoonData) {
                let numbel = parseInt(timeStr) - 1;
                forenoonStr += '<ul id="' + 'ulID' + timeStr + '"><li>' + forenoonData[timeStr] + '</li></ul>';
            };
            for (let timeStr in afternoonData) {
                let numbel = parseInt(timeStr) + afternoonData.length;
                afternoonStr += '<ul id="' + 'ulID' + numbel + '"> <li>' + afternoonData[timeStr] + '</li></ul>';
            };
            for (let timeStr in nightData) {
                let numbel = parseInt(timeStr) + forenoonData.length + afternoonData.length;
                nightStr += '<ul id="' + 'ulID' + numbel + '"> <li >' + nightData[timeStr] + '</li></ul>';
            };
            // 将字符串标签渲染到页面中
            $("#forenoonID").html(forenoonStr);
            $("#afternoonID").html(afternoonStr);
            $("#nightID").html(nightStr);

            let tabIndex,tabIndex1,tabIndex2;

            // 点击上午的时间
            $("#forenoonID ul").click(function () {
                tabIndex = $(this).index();
                tabIndex1 = $(this).index() + 1;
                tabIndex2 = $(this).index() + 2;
                // 更新页面点击后的样式
                RenderingStyle(tabIndex, tabIndex1, tabIndex2)
            })
            // 点击中午的时间
            $("#afternoonID ul").click(function () {
                tabIndex = $(this).index() + afternoonData.length;
                tabIndex1 = $(this).index() + afternoonData.length + 1;
                tabIndex2 = $(this).index() + afternoonData.length + 2;
                // 更新页面点击后的样式
                RenderingStyle(tabIndex, tabIndex1, tabIndex2)

            })
            // 点击下午的时间
            $("#nightID ul").click(function () {
                tabIndex = $(this).index() + forenoonData.length + afternoonData.length;
                tabIndex1 = $(this).index() + forenoonData.length + afternoonData.length + 1;
                tabIndex2 = $(this).index() + forenoonData.length + afternoonData.length + 2;
                // console.log(tabIndex)
                let IdOne = '#ulID' + tabIndex;
                let IdTwo = '#ulID' + tabIndex1;
                let IdThree = '#ulID' + tabIndex2;
                // 更新页面点击后的样式
                RenderingStyle(tabIndex, tabIndex1, tabIndex2)
            })
            // 封装渲染数据的方法
            function RenderingStyle(tabIndex, tabIndex1, tabIndex2) {
                let IdOne = '#ulID' + tabIndex;
                let IdTwo = '#ulID' + tabIndex1;
                let IdThree = '#ulID' + tabIndex2;
                // console.log(IdOne)
                // 先清除所有样式
                $("#forenoonID ul").removeClass("click-time-style-left click-time-style-mid click-time-style-right");
                $("#afternoonID ul").removeClass("click-time-style-left click-time-style-mid click-time-style-right");
                $("#nightID ul").removeClass("click-time-style-left click-time-style-mid click-time-style-right");
                //判断是否越界
                if (tabIndex < forenoonData.length + afternoonData.length + nightData.length - 2) {
                    $(IdOne).addClass("click-time-style-left ")
                    $(IdTwo).addClass("click-time-style-mid ")
                    $(IdThree).addClass("click-time-style-right ")
                } else {
                    window.alert("当前时间不可预约")
                    // $('.order-body').toast({
                    //     content: '当前时间不可预约',
                    //     duration: 1600,
                    //     isCenter: false,
                    //     animateIn: 'bounceIn-hastrans',
                    //     animateOut: 'bounceOut-hastrans',
                    // });
                }
            }

        });
    </script>
</body>

</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值