模板字符串元素增加事件

最新推荐文章于 2023-11-15 11:17:44 发布

A873054267

最新推荐文章于 2023-11-15 11:17:44 发布

阅读量879

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/A873054267/article/details/116462989

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://at.alicdn.com/t/font_2090302_3rtv8f729nq.js"></script>

    <style>
        .icon {
            width: 1em;
            height: 1em;
            overflow: hidden;
            margin-right: 2px;
        }

        #fn-list {
            position: absolute;
            top: 60px;
            left:12px;
            z-index: 100;
            display: flex;
        }
        #fn-list .wrapper{
            padding: 12px;
            display: flex;
            color: white;
            margin-right: 1px;
            background: rgb(99,99,99);
            cursor: pointer;
        }
        #fn-list .highLight{
            background: rgb(42,106,251);
        }
    </style>
</head>
<body>
<div id ="fn-list"></div>
<script>
    let divRoot = document.getElementById('fn-list');
    function generateButtonList(json,key) {
        return   `
              <div class="wrapper" id="${key}" ${json.last && 'style="margin-left:12px"'} οnclick="bindEvent(this)">
                    <svg id="${key}" class="icon" aria-hidden="true"><use xlink:href="#Geoiconmessage_success"></use></svg>
                <div class="text" id="${key}">${json.name}</div>
                    </div>`

    }
    let modeList =  [
        {
            name:'点',
            key:'point'
        },
        {
            name:'图标',
            key:'icon'
        },
        {
            name:'立方体',
            key:'point'
        },
        {
            name:'圆柱',
            key:'icon'
        },
        {
            name:'椭圆体',
            key:'point'
        },
        {
            name:'平面',
            key:'icon'
        },
        {
            name:'线',
            key:'point'
        },
        {
            name:'走廊',
            key:'icon'
        },
        {
            name:'绘制区',
            key:'point'
        },
        {
            name:'折线体',
            key:'icon'
        },
        {
            name:'清除',
            key:'icon',
            last:true
        },
    ]
    let res = '';
    modeList.map( (v,index) => {
        res += generateButtonList(v,index);
    })
    divRoot.innerHTML = res ;
    function bindEvent(e) {
        console.log(e)
    }
    let highLightDiv
</script>
</body>
</html>

A873054267

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模板字符串元素增加事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="http://at.alicdn.com/t/font_2090302_3rtv8f729nq.js"></script> <styl.
复制链接

扫一扫