JavaScript split() 方法

青旅半醒 2022-11-07 13:11 205阅读 0赞

定义和用法

split() 方法用于把一个字符串分割成字符串数组。

运用：  
将json数据里面的字符串类型的数据`"00,01,02,03,04"`转化成数组，再将数组遍历出来，分别赋值到每一个div里面。

json数据

{
    
        "tilesFloor": {
            "id": 0,
            "paramName": "tilesFloor",
            "paramValue": "00,01,02,03,04"
            
        }
        
    }

代码

<!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;
                }
        </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.tilesFloor.paramValue.split(','), function(i, item) {
                        html += '<div  class="floorinside">F' + item + '</div>';
                    });
    
                    $(".floorBar").html(html);
                },
                error: function(err) {
                    console.log(err);
                }
            })
        </script>
    </html>

样式

![bc31fa0577e85f30c4f3fd2d339b81bf.png][]

[bc31fa0577e85f30c4f3fd2d339b81bf.png]: /images/20221023/20da1a075e344cb09e5553217f975d56.png