我如何制作一个喜欢的按钮，在第一次点击时增加计数器并在第二次点击时减少答案

【问题标题】：How do i make a like button that increase counter on first click and decrease on second click我如何制作一个喜欢的按钮，在第一次点击时增加计数器并在第二次点击时减少
【发布时间】：2022-10-20 00:31:54
【问题描述】：

我正在尝试制作一个喜欢按钮，就像典型的社交媒体喜欢按钮一样计数和减少

我想出了这个js，但点击时它只是不断减少。如果我能获得有关如何在我的网站上存储计数的帮助，我将不胜感激

        function liked(heart){
            heart.classList.toggle("liked");
            if (heart.liked) {
                click ++;
            } else {
                click --;
            }
            document.getElementById('clicks').innerHTML = click;
        }

【问题讨论】：

heart.liked 应该是 heart.classList.includes("liked")

标签： javascript onclick counter

【解决方案1】：

由于您没有向我们提供所有相关代码，因此我将假设一些事情，但您仍然可以使用它来帮助您模仿 like/dislike 行为

在这个例子中，我有 2 个按钮，一个喜欢和一个不喜欢按钮，它们都调用相同的函数。

<h1 id="counter">10</h1>
<button id="like" onclick="liked(event)">like</button>
<button id="dislike" onclick="liked(event)">dislike</button>

通常，当您单击时，常见行为是counter +1，但用户也可以unlike 帖子或视频，无论再次按下按钮。 dislike button 也是如此，它具有 counter-1 行为，但您也可以再次按下它以将计数器返回到以前的状态。

您只能有 3 个选项：

喜欢=反击+1
不喜欢它=counter-1
两者都不 = 计数器不变

使用此代码，如果按下喜欢按钮并且您切换到不喜欢然后counter will decrease by 2 因为它删除了您给它的喜欢状态，或者它可以是相反的方式和go up by 2 如果您从dislike 转到@987654331 @

let like_flag = false;
let dislike_flag = false;
function liked(event) {
  let counter = parseFloat(document.getElementById('counter').innerHTML);
  var button = event.target.innerText;
  switch(button){
    case 'like':
        if (like_flag==false && dislike_flag==false) {
        counter++;
        like_flag=true;
      } else if (like_flag==false && dislike_flag==true) {
        counter = counter + 1; //changed this to 1 instead of 2
        like_flag=true;
        dislike_flag=false;
      } else {
        counter--;
        like_flag=false;
      }
    break;
    case 'dislike':
        if (dislike_flag==false && like_flag==false) {
        counter--;
        dislike_flag=true;
      } else if (dislike_flag==false && like_flag==true) {
        counter = counter - 1; //changed this to 1 instead of 2
        dislike_flag=true;
        like_flag=false;
      } else {
        counter++;
        dislike_flag=false;
      }
    break;
  }
  console.log('the button '+button+' was pressed');
  
  document.getElementById('counter').innerHTML = counter;
}

由于两个按钮都调用相同的函数，因此我们使用标志并将它们从 false 更改为 true 或从 true 更改为 false。这样我们就知道按下了哪个按钮以及我们的代码接下来应该做什么。希望这可以帮助

https://jsfiddle.net/kenpy/p8oesf61/53/

【讨论】：

谢谢兄弟，它奏效了，但我不得不将计数器改为增加 1 而不是 2。我真的很感激

【解决方案2】：

classList.toggle() 返回一个布尔值

所以，只需这样做：

function liked(heart) 
  {
  if (heart.classList.toggle('liked') )  click++;
  else                                   click--;

  document.getElementById('clicks').textContent = click;
  }

【讨论】：