闭包案例——点赞应用

最新推荐文章于 2025-05-27 22:46:14 发布

原创最新推荐文章于 2025-05-27 22:46:14 发布 · 262 阅读

2 ·

CC 4.0 BY-SA版权

本文通过实例演示了如何使用CSS和JavaScript实现图片网格布局，并添加交互功能，如点赞按钮的动态效果，展示了前端开发中常见技术的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>