JavaScript split() 方法

王小婷

发布于 2021-03-15 21:38:57

8690

发布于 2021-03-15 21:38:57

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

定义和用法

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>

样式