在JavaScript中如何实现点赞/点踩计数器的条件重置功能

实现方案 #

你仅需修改点赞、点踩的点击处理函数，在触发对应操作时将另一侧的计数重置即可，修改后的代码如下：

function upClick(idx) {
  GV_MOVIES[idx].thumbsUp++;
  // 点击点赞时清空点踩计数
  GV_MOVIES[idx].thumbsDown = 0;
  display();
}

function downClick(idx) {
  GV_MOVIES[idx].thumbsDown++;
  // 点击点踩时清空点赞计数
  GV_MOVIES[idx].thumbsUp = 0;
  display();
}

可选优化（贴近YouTube实际交互） #

如果需要支持用户重复点击同一按钮取消投票的效果，可以加上状态判断：

function upClick(idx) {
  if (GV_MOVIES[idx].thumbsUp > 0) {
    // 已点赞，点击取消
    GV_MOVIES[idx].thumbsUp = 0;
  } else {
    GV_MOVIES[idx].thumbsUp++;
    GV_MOVIES[idx].thumbsDown = 0;
  }
  display();
}

function downClick(idx) {
  if (GV_MOVIES[idx].thumbsDown > 0) {
    // 已点踩，点击取消
    GV_MOVIES[idx].thumbsDown = 0;
  } else {
    GV_MOVIES[idx].thumbsDown++;
    GV_MOVIES[idx].thumbsUp = 0;
  }
  display();
}

内容的提问来源于stack exchange，提问作者Spanky