1. 程式人生 > 其它 >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> 效果如下: