“喜欢按钮”功能仅在单击某个部分时增加喜欢的数量答案

【问题标题】：The "like button" function only increases the number of likes for a certain section whenever it's clicked“喜欢按钮”功能仅在单击某个部分时增加喜欢的数量
【发布时间】：2022-01-14 06:38:50
【问题描述】：

“为您推荐”部分下的我的心脏按钮有问题。在“每日食谱”帖子中，心形按钮工作得很好。我想要做的是让右侧帖子的点赞数也增加。但是，每当我点击“为您推荐”部分下的其他心形按钮时，它们只会增加 ROTD 帖子的点赞数。

这是我使用的 JavaScript 和 HTML 代码：

console.log("JavaScript is connected");

let numCount = 68
let count = document.querySelector('.count')
function addLike () {
    numCount ++
    count.innerText = numCount
}

<div class="likebtn1">
  <button class= "heartbtn" onclick="addLike()"><img src="imgs/heart.png" class="heart" alt="the heart-like button"></button>
  <p class="yurilike"><span class="count">68</span></p>
</div>

<div class="likebtn2">
  <button class="heartbtn" onclick="addLike()"><img src="imgs/heart.png" class="heart2" alt="the heart-like button"></button> 
  <p class="Emilike"><span class="count">212</span></p>
</div>

<div class="likebtn3">
  <button class="heartbtn" onclick="addLike()"><img src="imgs/heart.png" class="heart3" alt="the heart-like button"></button> 
  <p class="Marisalike"><span class="count">33</span></p>
</div>

每当我尝试为 RFY 部分帖子创建单独的函数并为其他心形按钮执行相同的操作时，它们都会停止工作并且不执行任何操作。

这里有一个视频来说明我在说什么： https://www.youtube.com/watch?v=8NYqizDBkZk

【问题讨论】：

标签： javascript html

【解决方案1】：

这是因为querySelector 总是返回与查询匹配的第一个元素。当你这样做时

document.querySelector('.count')

它总是给你相同的.count div，不管按下哪个like按钮。

您需要使用更具体的查询，例如.likebtn2 .count，或者为每个计数指定一个唯一的类名。

【讨论】：

【解决方案2】：

document.body.addEventListener('click', (event) => {
  const button = event.target.closest('.button');

  if (!button) return;

  const container = button.closest('.likes');

  if (!container) return;

  const counter = container.querySelector('.counter');

  if (!counter) return;

  counter.innerText = Number(counter.innerText) + 1;
});

<div class="likes">
  <button class="button">I love it!</button>
  <div class="counter">0</div>
</div>

<div class="likes">
  <button class="button">I love it!</button>
  <div class="counter">0</div>
</div>

<div class="likes">
  <button class="button">I love it!</button>
  <div class="counter">0</div>
</div>

【讨论】：

【解决方案3】：

将您的 JS 代码更改为我拥有的代码，然后将 this 关键字添加到调用 JS 函数的按钮。

function addLike(e){
  let count = Number(e.nextElementSibling.innerText) + 1;
  e.nextElementSibling.innerText = count;
}

<div class="likebtn1">
  <button class= "heartbtn" onclick="addLike(this)"><img src="imgs/heart.png" class="heart" alt="the heart-like button"></button>
  <p class="yurilike"><span class="count">68</span></p>
</div>

<div class="likebtn2">
  <button class="heartbtn" onclick="addLike(this)"><img src="imgs/heart.png" class="heart2" alt="the heart-like button"></button> 
  <p class="Emilike"><span class="count">212</span></p>
</div>

<div class="likebtn3">
  <button class="heartbtn" onclick="addLike(this)"><img src="imgs/heart.png" class="heart3" alt="the heart-like button"></button> 
  <p class="Marisalike"><span class="count">33</span></p>
</div>

【讨论】：