aiot/3dModeling/zhhry15/FloorClick.js

//创建楼层选择器
function creatFloorChoose() {
    var floorsign =
        `<div id="floorChooseDiv" class="showFloorBtn">         
        
        <div value='close' onclick="handleSide()"  class ="closeIocn"  id='rightSideSwitch'></div>
        </div>`;

    $('#div2d').append($(floorsign));

    var car = app.query(".Floor")

    var html = ``
    for(let i = 0 ; i < car.length; i++){
        html +=
        `
        <div onclick="floorclick('${car[i].id}')" class = "showFloorBtns" id='${car[i].id}'>${car[i].id}</div> 
        `
    }
    $('#floorChooseDiv').append($(html));
    
    $('head').append($(`
        <style>
        .showFloorBtns{
            margin-bottom:6px;
            border:1px solid rgb(24,118,208);
            border-radius:4px;
            text-align:center;
            height:28px;
            line-height:28px;
            width:40px;
            color:rgba(255,255,255,0.5);
            background-color:rgba(24,144,255,0.3);
        //  display:inline-block;
                    }
        .showFloorBtn{
        position: absolute;
        // top:10px;
            top:calc(2%);
            right:-52px;
        // height:800px;
            width:50px;
            border-radius:0px;
            margin-top:0px;
                    }
        .closeIocn{
        //  margin-bottom:6px;
        //  border:1px solid rgb(24,118,208);
            border-radius:4px;
            text-align:center;
            height:30px;
            line-height:28px;
            width:40px;
            color:rgba(255,255,255,0.5);
            background-image: url(https://s3.ax1x.com/2021/01/29/yCR8dP.png);
            background-repeat:no-repeat;
            background-position:center center;
            position: absolute;
            top: calc(50%);
            left: -35px;

                }
                .active{
        background-color:red;
                }