data属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<ul id="list"></ul>
<div id="info"></div>
<script type="text/javascript">
var data = {
01:{
name:"张三1",
age : 18
},
02:{
name:"张三2",
age : 14
},
03:{
name:"张三3",
age : 19
},
04:{
name:"张三4",
age : 17
},
}
var list = document.getElementById("list");
for (var id in data){
var item = data[id];
var liElement = document.createElement("li");
liElement.appendChild(document.createTextNode(item.name));
liElement.setAttribute("data-name",item.name);
liElement.setAttribute("data-age",item.age);
list.appendChild(liElement);
liElement.addEventListener("click",function(e){
console.log(e);
// this 是当前点击的元素
alert(this.name);
alert(this.getAttribute('data-age'));
console.log(this.dataset['age']);
})
}
</script>
</body>
</html>
浙公网安备 33010602011771号