点击按钮时如何修改其他按钮颜色并实现互斥toggle效果

• 混用内联样式和CSS类控制激活状态：切换时仅清空了另一个按钮的内联backgroundColor属性，没有移除对方的激活类，CSS类的样式优先级高于空内联样式，导致另一个按钮的激活状态无法正常清除
• 没有对当前点击按钮的状态做预判断，无法实现「点击已激活按钮时取消选中、点击未激活按钮时互斥切换」的逻辑

CSS 部分 #

.mystyle {
  background-color: green;
  color: white;
}
.mystyle1 { 
  background-color: red;
  color: white;
}

HTML 部分 #

<button id="btn1" onclick="myFunction(1)">Upvote</button>
<button id="btn2" onclick="myFunction(-1)">Down Vote</button>

JavaScript 部分 #

function myFunction(str) {
  const btn1 = document.getElementById("btn1");
  const btn2 = document.getElementById("btn2");

  if(str === 1){
    // 检查btn1当前是否为激活状态
    const isActive = btn1.classList.contains("mystyle");
    // 先清除另一个按钮的激活状态
    btn2.classList.remove("mystyle1");
    if(isActive){
      // 已激活则移除自身类，实现toggle取消效果
      btn1.classList.remove("mystyle");
    }else{
      // 未激活则添加自身激活类
      btn1.classList.add("mystyle");
    }
  }else{
    // 检查btn2当前是否为激活状态
    const isActive = btn2.classList.contains("mystyle1");
    // 先清除另一个按钮的激活状态
    btn1.classList.remove("mystyle");
    if(isActive){
      // 已激活则移除自身类，实现toggle取消效果
      btn2.classList.remove("mystyle1");
    }else{
      // 未激活则添加自身激活类
      btn2.classList.add("mystyle");
    }
  }
}

• 初始状态两个按钮均为透明背景，无激活状态
• 点击未激活的btn1：btn1变为绿色，若btn2之前为红色则自动恢复透明
• 点击未激活的btn2：btn2变为红色，若btn1之前为绿色则自动恢复透明
• 点击已经处于激活状态的按钮：该按钮自动恢复透明，回到无任何按钮激活的状态
• 全程通过CSS类控制状态，无样式优先级冲突，同一时间最多只有一个按钮处于激活状态，完全匹配需求

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