其他分享
首页 > 其他分享> > html 字符串拼接中 onclick 传参为对象问题处理

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>   效果如下:

 

 

标签:console,name,vh,element,html,log,onclick,parseData,传参为
来源: https://www.cnblogs.com/j-a-h/p/15693958.html