数组each遍历渲染如何给第一个div添加class

王小婷

发布于 2025-05-20 02:57:18

5800

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

数组each遍历渲染如何给第一个div添加class 并且在点击每个div的时候，有被选中的效果其他div背景颜色移除被点击的div背景颜色添加。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
            /* 楼层条样式 */
            .floorBar {
                position: absolute;
                right: 30%;
                top: 10%;
                color: #fff;
                z-index: 1000;
                width: 29px;
                height: 150px;
                text-align: center;
                box-shadow: 0px 0px 10px #0076ff inset;
                cursor: pointer;
                overflow: auto;
                background: rgba(39, 32, 97, 0.5);
                font-size: 12px;
            }
            
            .floorinside {
                line-height: 31px;
                height: 30px;
            }
            
            .on {
                        background:#337ab7;
                        color:#fff
                    }
    </style>
    </head>
    <body>
        <div class="floorBar"></div>
    </body>
    <script type="text/javascript">
        $.ajax({
            url: "test.json",
            data: {},
            type: "GET",
            success: function(data) {
                var html = "";


                $.each(data.paramValue.split(','), function(i, item) {
                    html += '<div  onclick="updata2dTile()"  class="floorinside">F' + item + '</div>';
                });
                $(".floorBar").html(html);
                
                 $(".floorinside:eq(0)").addClass('on');
                 $(".floorinside").click(function() {
                    $(this).addClass("on").siblings().removeClass("on");
                 }); 
            },
            error: function(err) {
                console.log(err);
            }
        })

        //点击事件
        /* function updata2dTile(item) {
        
            $(this).addClass("on").siblings().removeClass("on");
        } */
    </script>
</html>

json

{
        "paramValue": "00,01,02,03,04"
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

暂无评论

数组each遍历渲染如何给第一个div添加class

数组each遍历渲染如何给第一个div添加class

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐