html 字符串拼接中 onclick 传参为对象问题处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .contaier {
            background: #eee;
            width: 41.6667vw;
            height: 37.037vh;
            overflow: auto;
            margin: 0 auto;
            padding: 0.9259vh 0.5208vw;
        }
        .item {
            font-size: 1.8519vh;
            color: #fff;
            background: #63B2FB;
            padding: 0.9259vh;
            border-radius: 0.9259vh;
            margin-bottom: 1.8519vh;
        }
    </style>
</head>

<body>
    <div class="contaier">
    </div>
    <script>
        $(function () {
            getHtml();
        })
        var data = [
            { name: "<header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。" },
            { name: "<nav>:标记导航,仅对文档中重要的链接群使用。" },
            { name: "<main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。" },
        ]
        function getHtml() {
            $('.contaier').html('');
            var htmlCode = '';
            for (let index = 0; index < data.length; index++) {
                const element = data[index];
                var _adrobj = JSON.stringify(element).replace(/\"/g, "'");//双引号替换成单引号
                htmlCode += '<div class="item" onclick="test(' + _adrobj + ',this)"  data-obj="' + _adrobj + '">' + element.name;
                htmlCode += '</div>';
            }
            $('.contaier').html(htmlCode);

        }
        function test(element, ev) {
            console.log('element ', element);
            console.log('element.name ', element.name);
            var dataobj = $(ev).attr('data-obj');
            var parseData = eval('(' + dataobj + ')')
            console.log('dataobj ', dataobj);
            console.log('parseData ', parseData);
            console.log('parseData.name ', parseData.name);
        }
    </script>

</body>

</html>
 
效果如下:

 

 

posted @   蓝色精灵jah  阅读(396)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示