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