如何用JavaScript实现多行列方块独立点击切换颜色（解决ID重复问题）

问题核心 #

当前代码存在两个关键问题：

1. 使用全局click变量，所有方块共享同一个状态，点击任意一个方块会干扰其他方块的颜色切换逻辑
2. 仅通过getElementById获取单个容器，无法适配多行的多个容器元素

解决方案 #

修改思路如下：

• 将HTML中的id="container"改为class="container"，支持多个容器复用
• 每个方块独立维护自己的点击状态，避免全局变量污染
• 遍历所有容器，为内部每个方块绑定独立的点击事件

修改后的完整代码 #

HTML

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>test</title>
</head>

<body>
  <div class="header">Goals</div>
  <div class="row">
    <div class="col-1">Names:</div>
    <div class="col-2">AA</div>
    <div class="col-3">AA</div>
    <div class="col-4">FA</div>
    <div class="col-5">AA</div>
    <div class="col-6">OB</div>
    <div class="col-7">DB</div>
    <div class="col-8">DG</div>
    <div class="col-9">MK</div>
    <div class="col-10">GM</div>
    <div class="col-11">BM</div>
    <div class="col-12">SM</div>
    <div class="col-13">LN</div>
    <div class="col-14">ER</div>
    <div class="col-15">SR</div>
    <div class="col-16">YS</div>
    <div class="col-17">MT</div>
    <div class="col-18">ST</div>
    <div class="col-19">ST</div>
    <div class="col-20">JV</div>
    <div class="col-21">EZ</div>
  </div>

  <div class="row">
    <div class="col-1">Ik learn how to count till 10.</div>
    <div class="container">
      <div class="col-2" data-click-count="0"> </div>
      <div class="col-3" data-click-count="0"> </div>
      <div class="col-4" data-click-count="0"> </div>
      <div class="col-5" data-click-count="0"> </div>
      <div class="col-6" data-click-count="0"> </div>
      <div class="col-7" data-click-count="0"> </div>
      <div class="col-8" data-click-count="0"> </div>
      <div class="col-9" data-click-count="0"> </div>
      <div class="col-10" data-click-count="0"> </div>
      <div class="col-11" data-click-count="0"> </div>
      <div class="col-12" data-click-count="0"> </div>
      <div class="col-13" data-click-count="0"> </div>
      <div class="col-14" data-click-count="0"> </div>
      <div class="col-15" data-click-count="0"> </div>
      <div class="col-16" data-click-count="0"> </div>
      <div class="col-17" data-click-count="0"> </div>
      <div class="col-18" data-click-count="0"> </div>
      <div class="col-19" data-click-count="0"> </div>
      <div class="col-20" data-click-count="0"> </div>
    </div>
  </div>
  <!-- 可添加更多row和container -->
</body>
</html>

CSS

div {
  background-color: white;
  text-align: center;
  float: left;
}

* {
  box-sizing: border-box;
}

.header {
  border: 1px solid gray;
  padding: 15px;
  width: 100%;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 20px;
  height: 15px;
  border: 1px solid grey;
}

.col-1 {
  min-width: 20%;
}

.col-2 {
  min-width: 4%;
}

.col-3 {
  min-width: 4%;
}

.col-4 {
  width: 4%;
}

.col-5 {
  width: 4%;
}

.col-6 {
  width: 4%;
}

.col-7 {
  width: 4%;
}

.col-8 {
  width: 4%;
}

.col-9 {
  width: 4%;
}

.col-10 {
  width: 4%;
}

.col-11 {
  width: 4%;
}

.col-12 {
  width: 4%;
}

.col-13 {
  width: 4%;
}

.col-14 {
  width: 4%;
}

.col-15 {
  width: 4%;
}

.col-16 {
  width: 4%;
}

.col-17 {
  width: 4%;
}

.col-18 {
  width: 4%;
}

.col-19 {
  width: 4%;
}

.col-20 {
  width: 4%;
}

.col-21 {
  width: 4%;
}

JavaScript

function initColorBlocks() {
  // 获取所有容器
  const containers = document.querySelectorAll('.container');
  // 颜色顺序数组，简化循环逻辑
  const colorSequence = ['white', 'yellow', 'orange', 'green'];

  containers.forEach(container => {
    // 获取当前容器内的所有方块
    const blocks = container.children;
    for (let i = 0; i < blocks.length; i++) {
      const block = blocks[i];
      block.onclick = function() {
        // 获取当前方块的点击次数并转为数字
        let clickCount = parseInt(block.dataset.clickCount);
        // 更新点击次数，取模实现循环切换
        clickCount = (clickCount + 1) % colorSequence.length;
        // 设置新背景色
        block.style.backgroundColor = colorSequence[clickCount];
        // 保存更新后的次数到元素属性
        block.dataset.clickCount = clickCount;
      }
    }
  });
}

// 页面元素加载完成后初始化事件绑定
window.addEventListener('DOMContentLoaded', initColorBlocks);

关键修改说明 #

1. 容器类名替换：将id="container"改为class="container"，支持多个容器元素复用
2. 独立状态存储：每个方块通过data-click-count属性存储自身点击次数，避免全局变量冲突
3. 颜色数组简化逻辑：用数组存储颜色顺序，通过取模运算实现循环切换，替代繁琐的if-else判断
4. 批量处理容器：用querySelectorAll获取所有容器，遍历处理每个容器内的方块
5. DOM加载事件：用DOMContentLoaded确保页面元素加载完成后再绑定事件，避免元素未找到的问题

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