React.js中实现按钮点击独立切换背景色的问题求助

你的核心问题是当前代码会在点击时移除所有按钮的clicked类，导致无法实现单个按钮的独立状态切换。只需要修改点击事件的逻辑，去掉全局移除类的循环，改用classList.toggle()方法来单独切换当前按钮的状态即可。

修改后的代码： #

JavaScript

var buttons = document.getElementsByClassName("time-button");

var click_listener = function(event) {
  // 直接切换当前点击按钮的clicked类：存在则移除，不存在则添加
  event.target.classList.toggle("clicked");
};
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", click_listener, false);
}

CSS（无需修改）

.clicked {
  background-color: orange;
}

HTML（修正原生HTML属性写法）

<button class="time-button">9:30 am</button>
<button class="time-button">9:00 am</button>
<button class="time-button">8:30 am</button>
<button class="time-button">8:00 am</button>

关键改动说明： #

• 删掉了循环移除所有按钮clicked类的代码，不再干扰其他按钮的状态
• 使用classList.toggle("clicked")替代单独的add方法，这个方法会自动判断当前元素是否包含该类：有就移除，没有就添加，完美实现点击切换的需求
• 修正了HTML里的className（这是React等框架的写法，原生HTML标准属性为class）

内容的提问来源于stack exchange，提问作者Jéssica Araújo