如何避免按钮操作被覆盖？实现多按钮置灰叠加效果

问题根源 #

当前代码每次点击按钮时，会强制将非目标单词设为白色，完全覆盖之前其他按钮的置灰操作，导致无法实现叠加效果。同时第三次点击的重置逻辑未正确关联全局状态更新。

解决方案思路 #

1. 用结构化数据存储每个按钮的两种状态对应的置灰单词，避免冗余的条件判断
2. 维护每个按钮的点击状态（0：未激活，1：首次点击，2：二次点击）
3. 每次按钮状态变化后，全局合并所有激活按钮的置灰单词，生成去重集合
4. 根据全局集合统一更新表格单元格颜色，不再强制重置非目标单词为白色
5. 第三次点击按钮时，重置该按钮状态为0，重新计算全局置灰集合

修改后的完整代码 #

HTML

<table>
  <tr>
    <td style="color:white;">Take</td>
    <td style="color:white;">Behave</td>
    <td style="color:white;">Riddle</td>
  </tr>
  <tr>
    <td style="color:white;">Like</td>
    <td style="color:white;">Move</td>
    <td style="color:white;">Reach</td>
  </tr>
  <tr>
    <td style="color:white;">Median</td>
    <td style="color:white;">Utopia</td>
    <td style="color:white;">Walk</td>
  </tr>
</table>
<br>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="reset">RESET</button>

CSS

table {
  font-size: 30px;
  width: 25%;
  text-align: center;
  border: none;
  background-color: black;
}
td {
  padding: 8px;
}

JavaScript

// 存储每个按钮的配置：ID、首次点击置灰单词、二次点击置灰单词
const buttonConfigs = [
  { id: "b1", firstGray: ["Behave", "Reach"], secondGray: ["Take", "Riddle", "Like", "Move", "Median", "Utopia", "Walk"] },
  { id: "b2", firstGray: ["Take", "Behave", "Utopia"], secondGray: ["Riddle", "Like", "Move", "Reach", "Median", "Walk"] },
  { id: "b3", firstGray: ["Like", "Median"], secondGray: ["Take", "Behave", "Riddle", "Move", "Reach", "Utopia", "Walk"] }
];

// 跟踪每个按钮的状态：0=未激活，1=首次点击，2=二次点击
const buttonStates = [0, 0, 0];
const tableCells = document.getElementsByTagName("td");

// 生成当前所有需要置灰的单词集合
function getGrayWords() {
  const grayWords = new Set();
  buttonConfigs.forEach((config, index) => {
    const state = buttonStates[index];
    if (state === 1) {
      config.firstGray.forEach(word => grayWords.add(word));
    } else if (state === 2) {
      config.secondGray.forEach(word => grayWords.add(word));
    }
  });
  return grayWords;
}

// 更新表格单元格颜色
function updateTable() {
  const grayWords = getGrayWords();
  for (const cell of tableCells) {
    cell.style.color = grayWords.has(cell.textContent.trim()) ? "gray" : "white";
  }
}

// 更新按钮样式
function updateButtonStyle(button, state) {
  if (state === 1) {
    button.style.backgroundColor = "green";
  } else if (state === 2) {
    button.style.backgroundColor = "red";
  } else {
    button.style.backgroundColor = "";
  }
}

document.body.addEventListener("click", function(event) {
  const target = event.target;
  const buttonIndex = buttonConfigs.findIndex(config => config.id === target.id);
  
  if (buttonIndex !== -1) {
    // 更新按钮状态：0→1→2→0循环
    buttonStates[buttonIndex] = (buttonStates[buttonIndex] + 1) % 3;
    updateButtonStyle(target, buttonStates[buttonIndex]);
    updateTable();
    return;
  }
  
  if (target.id === "reset") {
    // 重置所有状态
    buttonStates.fill(0);
    buttonConfigs.forEach(config => {
      const button = document.getElementById(config.id);
      updateButtonStyle(button, 0);
    });
    updateTable();
  }
});

关键改动说明 #

1. 结构化配置：buttonConfigs 把按钮和对应的置灰单词绑定，后续新增按钮只需添加配置项，无需修改逻辑代码
2. 全局状态计算：getGrayWords 合并所有激活按钮的置灰单词，确保叠加效果
3. 状态循环：按钮状态通过 (state + 1) % 3 实现0→1→2→0的循环，自然支持第三次点击重置
4. 统一更新：每次状态变化后调用 updateTable 统一刷新表格，避免局部覆盖导致的冲突

内容的提问来源于stack exchange，提问作者Vecipi