JavaScript动态元素样式与类管理：实现可切换按钮状态的教程

<div class="options">
  <div class="option">
    <div class="button">
      <div class="key-selector">
        <span>A</span>
      </div>
      <div class="text">1</div>
    </div>
  </div>
  <!-- 更多类似的 .option 元素 -->
</div>
<div class="button-bar">
  <div class="nav-inner" id="forward"> Continue ></div>
</div>

.button {
  background-color: rgb(226, 226, 226); /* 默认背景色 */
  color: black; /* 默认文字颜色 */
  opacity: 1;
  /* 其他默认样式 */
  cursor: pointer;
  padding: 21px 25px;
  border-radius: 5px;
  position: relative;
}

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

.button.selected-button {
  background-color: rgb(77, 55, 120); /* 选中背景色 */
  opacity: 0.65;
  color: white; /* 选中文字颜色 */
}

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

.button.selected-button .key-selector {
  color: white; /* 选中时颜色 */
}

/* 针对 forward 按钮的样式 */
#forward {
  background-color: rgb(191, 191, 191); /* 默认背景色 */
  color: black; /* 默认文字颜色 */
}

#forward.active { /* 假设我们用一个 'active' 类来激活它 */
  background-color: rgb(77, 55, 120);
  color: white;
  transition: 1s ease;
}

window.onload = function() {
  // 获取所有具有 "button" 类的元素
  const optionButtons = document.getElementsByClassName("button");
  // 获取 "Continue" 按钮
  const forwardButton = document.getElementById("forward");

  // 遍历所有按钮，并为每个按钮添加点击事件监听器
  Array.from(optionButtons).forEach(function(buttonElement) {
    buttonElement.addEventListener("click", () => {
      // 获取当前按钮内部的 key-selector 元素
      let keySelector = buttonElement.querySelector(".key-selector");

      // 判断当前按钮是否已经包含 "selected-button" 类
      if (buttonElement.classList.contains("selected-button")) {
        // 如果已选中，则执行取消选中操作

        // 恢复 key-selector 的默认样式
        keySelector.style.color = "rgb(51, 51, 51)";
        keySelector.style.opacity = "0.6";

        // 恢复按钮的默认样式
        buttonElement.style.backgroundColor = "rgb(226, 226, 226)";
        buttonElement.style.color = "black";
        buttonElement.style.opacity = "1";

        // 移除 "selected-button" 类
        buttonElement.classList.remove("selected-button");
        console.log("Button deselected. ClassName:", buttonElement.className);

        // 检查是否还有其他按钮被选中，如果没有，则重置 forward 按钮样式
        // (此处需要更复杂的逻辑来判断所有按钮状态，例如遍历所有按钮)
        // 简单示例：如果所有按钮都未选中，则重置forwardButton
        if (document.querySelectorAll('.button.selected-button').length === 0) {
            forwardButton.style.color = ""; // 或设置回默认颜色
            forwardButton.style.backgroundColor = "rgb(191, 191, 191)";
            forwardButton.style.transition = "";
        }

      } else {
        // 如果未选中，则执行选中操作

        // 设置按钮的选中样式
        buttonElement.style.backgroundColor = "rgb(77, 55, 120)";
        buttonElement.style.opacity = "0.65";
        buttonElement.style.color = "white";

        // 设置 key-selector 的选中样式
        keySelector.style.color = "white";

        // 更改 "Continue" 按钮的样式，表示有选项被选中
        forwardButton.style.color = "white";
        forwardButton.style.backgroundColor = "rgb(77, 55, 120)";
        forwardButton.style.transition = "1s ease";

        // 添加 "selected-button" 类
        buttonElement.classList.add("selected-button");
        console.log("Button selected. ClassName:", buttonElement.className);
      }
    });
  });
};