JavaScript事件处理：如何精准修改点击元素内的特定子元素样式

window.onload = function() {
  const buttons = document.getElementsByClassName("button"); // 获取所有按钮
  const forwardButton = document.getElementById("forward"); // 获取前进按钮 (如果需要全局状态，需要单独管理)

  Array.from(buttons).forEach(function(button) {
    button.addEventListener("click", () => {
      // 切换当前按钮的 'active' 类
      button.classList.toggle("active");

      // 查找当前被点击按钮内部的 key-selector
      const keySelector = button.querySelector(".key-selector");

      // 根据按钮的 active 状态来设置 key-selector 的颜色
      if (button.classList.contains("active")) {
        // 激活状态下，key-selector 变为白色
        keySelector.style.color = "white";
        // 如果 forwardButton 的状态需要根据是否有任何按钮被激活来改变，
        // 这里需要更复杂的逻辑，例如检查所有按钮是否有 active 类
        // 为简化，此处暂时移除原代码中对 forwardButton 的直接修改，
        // 假设 forwardButton 的状态由其他全局逻辑控制。
        // forwardButton.style.color = "white";
        // forwardButton.style.backgroundColor = "rgb(77, 55, 120)";
        // forwardButton.style.transition = "1s ease";
      } else {
        // 非激活状态下，key-selector 恢复默认颜色 (或通过CSS管理)
        // 这里可以直接通过CSS .button .key-selector 来设置默认颜色
        // keySelector.style.color = "#333"; // 假设默认是 #333
      }
    });
  });

  // 如果 forwardButton 需要在至少一个选项被选中时激活，可以这样实现：
  // 每次点击后检查所有按钮的 active 状态
  Array.from(buttons).forEach(function(button) {
    button.addEventListener("click", () => {
      button.classList.toggle("active");
      const keySelector = button.querySelector(".key-selector");

      // 更新 key-selector 样式
      if (button.classList.contains("active")) {
        keySelector.style.color = "white";
      } else {
        // 如果没有 .button.active .key-selector 的CSS规则，这里需要手动恢复
        keySelector.style.color = ""; // 清除内联样式，让CSS规则生效
      }

      // 检查是否有任何按钮处于激活状态
      const anyButtonActive = Array.from(buttons).some(btn => btn.classList.contains("active"));

      if (anyButtonActive) {
        forwardButton.style.color = "white";
        forwardButton.style.backgroundColor = "rgb(77, 55, 120)";
        forwardButton.style.transition = "1s ease";
      } else {
        forwardButton.style.color = ""; // 恢复默认
        forwardButton.style.backgroundColor = ""; // 恢复默认
        forwardButton.style.transition = "none"; // 移除过渡效果
      }
    });
  });
};

/* 默认按钮样式 */
.button {
  background-color: rgb(226, 226, 226);
  /* ... 其他样式 ... */
  color: #333; /* 默认文本颜色 */
}

/* 按钮悬停样式 */
.button:hover {
  background-color: rgb(77, 55, 120);
  opacity: 0.65;
  color: white;
}

/* 按钮激活状态样式 */
.button.active {
  background-color: rgb(77, 55, 120);
  opacity: 0.65;
  color: white;
}

/* 默认 key-selector 样式 */
.key-selector {
  color: #333; /* 默认颜色 */
  /* ... 其他样式 ... */
}

/* 按钮激活状态下 key-selector 的样式 */
.button.active .key-selector {
  color: white;
}

/* 按钮悬停状态下 key-selector 的样式 */
.button:hover .key-selector {
  color: white;
}

/* 前进按钮默认样式 */
#forward {
  background-color: rgb(191, 191, 191);
  color: #333; /* 默认颜色 */
}

/* 前进按钮悬停样式 */
#forward:hover {
  background-color: rgb(77, 55, 120);
  color: white;
}