JavaScript实现交互式按钮：动态样式切换与类名管理的最佳实践

window.onload = function() {
  const option = document.getElementsByClassName("button");
  // ... 其他代码 ...

  // 绑定选中逻辑
  Array.from(option).forEach(function(option) {
    option.addEventListener("click", () => {
      // ... 样式修改 ...
      option.className = "selected-button"; // 覆盖原有类名
      // ...
    });
  });

  // 绑定取消选中逻辑 (此处存在问题)
  const selectedButton = document.getElementsByClassName("selected-button");
  Array.from(selectedButton).forEach(function(selectedButton) {
    selectedButton.addEventListener("click", () => {
      // ... 样式修改 ...
      selectedButton.className = "button"; // 覆盖原有类名
      // ...
    });
  });
};

<div class="options">
  <div class="option">
    <div class="button">
      <div class="key-selector"><span>A</span></div>
      <div class="text">1</div>
    </div>
  </div>
  <!-- 更多按钮 -->
  <div class="option">
    <div class="button">
      <div class="key-selector"><span>B</span></div>
      <div class="text">2</div>
    </div>
  </div>
</div>

<div class="button-bar">
  <div class="nav-inner" id="backward"> < Back</div>
  <div class="nav-inner" id="forward"> Continue ></div>
</div>

.button {
  background-color: rgb(226, 226, 226);
  /* ... 其他默认样式 ... */
  cursor: pointer;
}

.button:hover {
  background-color: rgb(194, 194, 194);
  opacity: 0.8;
}

/* 选中状态的样式 */
.button.selected-button { /* 注意这里是 .button.selected-button，表示同时拥有这两个类 */
  background-color: rgb(77, 55, 120);
  opacity: 0.65;
  color: white;
}

/* 选中状态下 key-selector 的样式 */
.button.selected-button .key-selector {
  color: white;
}

/* 默认 key-selector 样式 */
.key-selector {
  color: rgb(51, 51, 51);
  opacity: 0.6;
  /* ... 其他样式 ... */
}

#forward {
  background-color: rgb(191, 191, 191); /* 默认继续按钮样式 */
}

/* 选中状态下 forward 按钮的样式 */
#forward.active { /* 可以定义一个 .active 类来表示可点击状态 */
  background-color: rgb(77, 55, 120);
  color: white;
  transition: 1s ease;
}

window.onload = function() {
  const options = document.getElementsByClassName("button"); // 获取所有初始类名为 "button" 的元素
  const forwardButton = document.getElementById("forward"); // 获取“继续”按钮

  Array.from(options).forEach(function(option) {
    option.addEventListener("click", () => {
      let keySelector = option.querySelector(".key-selector"); // 获取按钮内部的 key-selector 元素

      // 判断当前按钮是否已被选中
      if (option.classList.contains("selected-button")) {
        // 如果已选中，执行取消选中逻辑
        keySelector.style.color = "rgb(51, 51, 51)";
        keySelector.style.opacity = "0.6";
        option.style.backgroundColor = "rgb(226, 226, 226)";
        option.style.color = "black";
        option.style.opacity = "1";

        option.classList.remove("selected-button"); // 移除 selected-button 类

        // 检查是否有其他按钮仍处于选中状态，如果没有，则重置 forward 按钮样式
        if (document.querySelectorAll(".button.selected-button").length === 0) {
          forwardButton.style.color = ""; // 恢复默认颜色
          forwardButton.style.backgroundColor = "rgb(191, 191, 191)"; // 恢复默认背景
          forwardButton.classList.remove("active"); // 移除 active 类
        }

      } else {
        // 如果未选中，执行选中逻辑
        option.style.backgroundColor = "rgb(77, 55, 120)";
        option.style.opacity = "0.65";
        option.style.color = "white";

        keySelector.style.color = "white"; // 选中时 key-selector 变为白色

        // 激活“继续”按钮
        forwardButton.style.color = "white";
        forwardButton.style.backgroundColor = "rgb(77, 55, 120)";
        forwardButton.style.transition = "1s ease";
        forwardButton.classList.add("active"); // 添加 active 类

        option.classList.add("selected-button"); // 添加 selected-button 类
      }
      console.log(option.className); // 打印当前按钮的类名
    });
  });
};