本文详解如何通过 javascript 动态管理多个色块的点击状态，确保每次仅有一个色块被高亮（如设为深灰），其余恢复为对应背景色，同时同步更新页面主体背景及文字颜色。
本文详解如何通过 javascript 动态管理多个色块的点击状态，确保每次仅有一个色块被高亮（如设为深灰），其余恢复为对应背景色，同时同步更新页面主体背景及文字颜色。
在构建交互式色彩切换器时，一个常见需求是：用户点击某个色块后，不仅页面背景变为该色块颜色，该色块自身也需提供明确的“已选中”视觉反馈（例如变暗），且此前选中的色块应自动取消高亮——即始终保持唯一激活态。原始代码虽能切换页面背景，但缺乏对其他色块样式的统一重置逻辑。
解决关键在于：每次点击后，遍历所有色块，将当前点击目标设为高亮色（如 #343434），其余色块则恢复为其原始 ID 对应的背景色。注意：原始 HTML 中各色块的初始背景色由 CSS 的 id 选择器定义（如 #grey → grey），因此我们可直接复用 box.id 作为颜色值（需兼容 white/yellow 等关键字）。
以下是优化后的完整脚本：
const h2 = document.querySelector("h2");
const p = document.querySelector("p");
const boxes = document.querySelectorAll(".box");
const body = document.body;
boxes.forEach((box) => {
box.addEventListener("click", (e) => {
const bgColor = e.target.id;
body.style.backgroundColor = bgColor;
// 根据背景色动态调整文字对比度
if (bgColor === "white" || bgColor === "yellow") {
h2.style.color = "black";
p.style.color = "black";
} else {
h2.style.color = "white";
p.style.color = "white";
}
// 重置所有色块样式：仅当前点击项高亮，其余恢复原始色
boxes.forEach((targetBox) => {
if (targetBox.id === bgColor) {
targetBox.style.backgroundColor = "#343434"; // 激活态：深灰色
} else {
// 安全回退：若 ID 无对应 CSS 背景色，则设为透明或默认色
targetBox.style.backgroundColor = getComputedStyle(
document.getElementById(targetBox.id) || targetBox
).backgroundColor;
}
});
});
});
⚠️ 注意事项：
- 原始 CSS 中
#white和#yellow的背景色为纯色关键字，但getComputedStyle().backgroundColor返回 RGB 值（如"rgb(255, 255, 255)"）。为确保一致性，推荐在 CSS 中显式声明所有色块的background-color（包括white和yellow），或改用预设颜色映射对象替代id直接赋值。 - 若需更健壮的方案，可预先建立颜色映射表：
const colorMap = { grey: "grey", white: "white", blue: "blue", yellow: "yellow" }; // 然后用 colorMap[targetBox.id] 替代 targetBox.id - 高亮色
#343434应具备足够对比度，避免在深色背景下不可见；建议在设计时进行可访问性校验。
此方案实现了清晰的状态管理：每次点击触发全局重绘逻辑，消除手动维护“上一个激活元素”的复杂性，代码简洁、可维护性强，适用于任意数量的色块组件。
