前端实现多个单元单独点赞按钮分别计数
时间: 2023-07-17 07:54:55 浏览: 67
你可以为每个单元创建一个独立的点赞按钮,并为每个按钮设置一个独立的计数器。这样,每次点击特定单元的点赞按钮时,只会增加该单元的计数器的值。
首先,你需要为每个单元创建一个独立的HTML元素,并为每个按钮添加一个唯一的标识符(例如使用`id`属性)。
接下来,你可以使用JavaScript来处理点击事件,并更新相应单元的计数器。你可以通过给每个按钮添加一个点击事件监听器来实现这一点。
以下是一个简单的示例代码:
HTML:
```html
<div class="unit">
<p>单元1</p>
<button id="likeBtn1">点赞</button>
<span id="likeCount1">0</span>
</div>
<div class="unit">
<p>单元2</p>
<button id="likeBtn2">点赞</button>
<span id="likeCount2">0</span>
</div>
```
JavaScript:
```javascript
// 获取按钮和计数器元素
var likeBtn1 = document.getElementById('likeBtn1');
var likeCount1 = document.getElementById('likeCount1');
var likeBtn2 = document.getElementById('likeBtn2');
var likeCount2 = document.getElementById('likeCount2');
// 初始化计数器值
var count1 = 0;
var count2 = 0;
// 单元1点赞按钮点击事件处理程序
likeBtn1.addEventListener('click', function() {
count1++; // 增加计数器值
likeCount1.textContent = count1; // 更新计数器显示
});
// 单元2点赞按钮点击事件处理程序
likeBtn2.addEventListener('click', function() {
count2++; // 增加计数器值
likeCount2.textContent = count2; // 更新计数器显示
});
```
这样,每次点击单元1的点赞按钮时,计数器1的值会增加,并显示在相应的计数器元素上;每次点击单元2的点赞按钮时,计数器2的值会增加,并显示在相应的计数器元素上。你可以根据需要添加更多的单元和相应的按钮/计数器。