<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 840px;
height: 300px;
margin: 200px auto;
}
li {
width: 200px;
height: 200px;
float: left;
list-style: none;
margin-right: 10px;
margin-top: 20px;
}
img {
width: 200px;
height: 200px;
}
input {
width: 50px;
height: 20px;
outline: none;
margin-left: 75px;
margin-top: 10px;
}
</style>
<body>
<ul>
<li><img src="../img/1.jpg" alt=""><input type="button" value="赞(1)"></li>
<li><img src="../img/2.jpg" alt=""><input type="button" value="赞(1)"></li>
<li><img src="../img/3.jpg" alt=""><input type="button" value="赞(1)"></li>
<li><img src="../img/4.jpg" alt=""><input type="button" value="赞(1)"></li>
</ul>
</body>
<script>
// 获取所有的按钮
var btnObjs = document.getElementByTagName('input')
// 循环遍历每个按钮,注册点击事件
for(var i=0; i <btnObjs.length; i++) {
// 注册事件
btnObjs[i].onclick = getValue()
}
// 闭包缓存数据
function getValue() {
var value = 2
return function () {
this.value = '赞('+ (value++) +')'
}
}
</script>
相关文章：