<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包的应用-点赞案例</title>
<style>
ul{
list-style: none;
}
li{
float: left;
margin-left: 10px;
}
img{
width: 200px;
height: 180px;
}
input{
margin-left: 30%;
}
</style>
</head>
<body>
<ul>
<li><img src="images/1.jpg" alt=""><br/><input type="button" value="赞(0)"></li>
<li><img src="images/2.jpg" alt=""><br/><input type="button" value="赞(0)"></li>
<li><img src="images/3.jpg" alt=""><br/><input type="button" value="赞(0)"></li>
<li><img src="images/4.jpg" alt=""><br/><input type="button" value="赞(0)"></li>
</ul>
<script>
//获取input按钮
var btn=document.getElementsByTagName('input');
/*var value=1;
//循环遍历每个按钮
for(var i=0;i<btn.length;i++){
//每个按钮注册点击事件
btn[i].οnclick=function(){
this.value="赞("+(value++)+")"
}
}*/
//闭包缓存数据的方式
function getValue(){
var value=1;
return function(){
this.value="赞("+(value++)+")";
}
}
//循环遍历每个按钮
for(var i=0;i<btn.length;i++){
//注册点击事件
btn[i].onclick=getValue();
}
</script>
</body>
</html>
07-20
244
244
06-20
947
947
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
