靈活使用標籤的data自定義屬性和事件物件
阿新 • • 發佈：2018-11-07
如果需要動態的給每一個標籤新增一樣的事件，且只有對應的內容改變，則可以通過data事先定義好要用的資料，然後通過事件物件獲取，data自定義屬性可以是一個字串或者是一個物件
形如：
data-address=“中華人民共和國”
data-state=‘{“name”：“zs”，“age”：“14”}’ //這裡一定使用先單引號在雙引號，不然js沒辦法拿到值
獲取date資料：
$(this).data('address')或者$(this).data('state').name ;
js: ali.attributes('data-address').nodeValue 或者
console.log(e.attributes['data-zb'].nodeValue[9])然後通過字串拼接方式使用
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Imagination Image Map Editor</title> <style type="text/css"> .yinshe{ position: relative; } .box-wrapper { width: 200px; position: absolute; /*left: 50%; top: 50%;*/ /* margin-left: -200px; */ z-index: 2000; background-color: #ebf5e0; border-color: #e3f1d4; border-radius: 10px; -webkit-border-radius: 10px; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5); box-shadow: 0 0 15px rgba(0,0,0,0.5); } .box-wrapper .box-title { position: relative; /* min-height: 18px; */ /* height: 56px; */ padding: 15px 40px 15px 15px; border-bottom: 1px solid #e5e5e5; font-size: 14px; line-height: 20px; } .box-wrapper .box-main { font-size: 16px; padding: 15px; line-height: 22px; margin-bottom: 0; } .box-wrapper .box-title img { cursor: pointer; position: absolute; right: 15px; top: 18px; width: 24px; height: 24px; } .box-wrapper .box-btns { text-align: right; padding: 15px; border-top: 1px solid #e5e5e5; } .box-wrapper .box-btns button { display: inline-block; background-color: #20c3d3; color: #fff; padding: 6px 12px; margin-bottom: 0; font-size: 14px; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border-radius: 4px; -webkit-order-radius: 4px; border: none; } </style> </head> <body> <div class="yinshe"> <img src="img/maps.jpg" width="479" height="359" usemap="#maps" border="0" /> <map name="maps" id="maps"> <area shape="poly" onclick="myFunction(this);" data-zb='{"left":"8%","top":"10%"}' data-address = "地址：新疆烏魯木齊水磨溝區紅山路北一巷40號" title="新疆" target="_blank" coords="119,42,137,73,136,81,155,87,172,107,172,120,160,123,149,129,142,138,125,141,119,149,122,159,122,165,117,166,108,162,94,162,73,165,59,160,47,161,36,162,30,173,27,182,24,185,21,152,7,134,8,117,6,110,14,98,44,94,62,87,67,70,80,67,88,59,90,55,102,55,109,44,120,39,120,43,119,42"> <!--<area shape="poly" onclick="myFunction(this);" data-zb="{'left':'8%','top':' 10%'}" data-address = "地址：新疆烏魯木齊水磨溝區紅山路北一巷40號" title="新疆" target="_blank" coords="119,42,137,73,136,81,155,87,172,107,172,120,160,123,149,129,142,138,125,141,119,149,122,159,122,165,117,166,108,162,94,162,73,165,59,160,47,161,36,162,30,173,27,182,24,185,21,152,7,134,8,117,6,110,14,98,44,94,62,87,67,70,80,67,88,59,90,55,102,55,109,44,120,39,120,43,119,42">--> </map> </div> </body> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function alerts(e,wxr_title){ $(".yinshe").append('<div class="box-wrapper">\n' + ' <div class="box-title">'+wxr_title+'<span id="close"><img src="img/close.png" alt=""></span></div>\n' + ' <p class="box-main">'+e+'</p>\n' + // ' <div class="box-btns">\n' + // ' <button type="button">'+close+'<tton>\n' + // ' </div>\n' + ' </div>\n'); } function myFunction(e){ console.log(e); console.log(e.attributes['data-zb'].nodeValue); //js console.log(e.attributes['data-zb'].nodeValue[9]); //js console.log($(e)); // console.log($(e).data('zb').left); var address=$(e).data("address"); // var wraps=document.getElementsByClassName('box-wrapper')[0]; var lefts=$(e).data('zb').left; var tops=$(e).data('zb').top; // $('.box-wrapper').css({"left":lefts,"top":tops}); alerts(e.title,address); $('.box-wrapper').css({"left":lefts,"top":tops}); } $(document).on('click','.box-wrapper #close',function(){ $('.box-wrapper').hide(); }) </script> </html>
