<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <img src='images/1.jpg' height='150px' width='150px'> <img src='images/2.jpg' height='150px' width='150px'> <img src='images/3.jpg' height='150px' width='150px'> <img src='images/4.jpg' height='150px' width='150px'><br/> <button id="like-btn1">赞(<span id="like-count1">0</span>)</button> <button id="like-btn2">赞(<span id="like-count2">0</span>)</button> <button id="like-btn3">赞(<span id="like-count3">0</span>)</button> <button id="like-btn4">赞(<span id="like-count4">0</span>)</button> </div> <script type="text/javascript"> // 闭包方式实现点赞功能1 var like = (function() { var count = 0; return function() { count++; document.getElementById("like-count1").innerHTML = count; } })(); // 监听点击事件并调用闭包函数1 document.getElementById("like-btn1").addEventListener("click", like); // 闭包方式实现点赞功能2 var like = (function() { var count = 0; return function() { count++; document.getElementById("like-count2").innerHTML = count; } })(); // 监听点击事件并调用闭包函数2 document.getElementById("like-btn2").addEventListener("click", like); // 闭包方式实现点赞功能3 var like = (function() { var count = 0; return function() { count++; document.getElementById("like-count3").innerHTML = count; } })(); // 监听点击事件并调用闭包函数3 document.getElementById("like-btn3").addEventListener("click", like); // 闭包方式实现点赞功能4 var like = (function() { var count = 0; return function() { count++; document.getElementById("like-count4").innerHTML = count; } })(); // 监听点击事件并调用闭包函数2 document.getElementById("like-btn4").addEventListener("click", like); </script> </body> </html>改正代码
时间: 2024-02-23 21:03:03 浏览: 111
这段代码本身没有错误,但是可以进行优化和简化。可以将点赞功能的闭包函数抽象出来,以便避免代码重复。同时,可以为每个点赞按钮设置一个通用的类名,以便通过类名来获取所有点赞按钮并添加点击事件监听器。修改后的代码如下:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img src='images/1.jpg' height='150px' width='150px'>
<img src='images/2.jpg' height='150px' width='150px'>
<img src='images/3.jpg' height='150px' width='150px'>
<img src='images/4.jpg' height='150px' width='150px'><br/>
<button class="like-btn">赞(<span class="like-count">0</span>)</button>
<button class="like-btn">赞(<span class="like-count">0</span>)</button>
<button class="like-btn">赞(<span class="like-count">0</span>)</button>
<button class="like-btn">赞(<span class="like-count">0</span>)</button>
</div>
<script type="text/javascript">
// 通用点赞闭包函数
function createLikeFunction(countId) {
var count = 0;
return function() {
count++;
document.getElementById(countId).innerHTML = count;
}
}
// 获取所有点赞按钮
var likeBtns = document.getElementsByClassName("like-btn");
// 为每个点赞按钮添加点击事件监听器
for (var i = 0; i < likeBtns.length; i++) {
var countId = "like-count" + (i+1);
var like = createLikeFunction(countId);
likeBtns[i].addEventListener("click", like);
}
</script>
</body>
</html>
```
阅读全文