<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点赞</title> <style> ul li img{ width:200px; height:200px; display: block;/*块级作用域换行*/ } ul li{ list-style: none; float:left; padding:40px; } ul li input{ margin-left: 70px; margin-top:20px; } </style> <script> window.onload=function(){ var btns=document.getElementsByTagName("input"); // var num=1; for(var i=0;i<btns.length;i++){ btns[i].onclick=function(){ // num++; // this.value="点赞("+num+")"; var num=1; return function(){ num++; this.value='点赞('+num+")"; } }(i) } } </script> </head> <body> <ul> <li> <img src="imgs/1.jpg" alt=""> <input type="button"value="点赞(1)"> </li> <li> <img src="imgs/2.jpg" alt=""> <input type="button"value="点赞(1)"> </li> <li> <img src="imgs/3.jpg" alt=""> <input type="button"value="点赞(1)"> </li> </ul> </body> </html> 实现细节: 如果使用全局变量,那么点击一个会进行计数,破坏了计数的规则。 效果: