JavaScript与CSS Grid：动态检测相邻单元格类名以实现复杂交互-html教程-PHP中文网

JavaScript与CSS Grid：动态检测相邻单元格类名以实现复杂交互

本文介绍如何在CSS Grid布局中，利用JavaScript动态检测相邻单元格的类名，从而实现复杂的交互逻辑。通过构建一个数据驱动的网格结构，并结合事件监听器，可以优雅地处理单元格点击事件，根据自身及相邻单元格的状态（如是否包含特定类名）来改变其样式，避免了繁琐的手动编码，提升了代码的可维护性和扩展性。

在开发基于css grid的交互式应用时，例如简单的游戏或仪表盘，经常需要根据用户点击某个单元格，并结合其相邻单元格的状态来触发不同的视觉反馈。传统上，若为每个单元格手动编写事件处理逻辑，不仅代码量巨大，难以维护，也缺乏灵活性。一个更优雅、更具函数式风格的解决方案，是利用数据结构来描述网格布局及其单元格之间的关系，并通过统一的事件监听机制来处理所有交互。

挑战：动态交互与相邻单元格检测

设想一个场景：在一个HTML网格中，当用户点击一个单元格时，如果其自身带有特定的“死亡”类名，则变为红色；否则，如果其任何一个相邻单元格已经变为“绿色”，则该被点击的单元格也变为“绿色”。手动为每个单元格编写类似以下的代码是低效且不可扩展的：

b21.addEventListener("click", () => {
    if ((b11.classList.contains("green") || b31.classList.contains("green") || b22.classList.contains("green")) && !(b21.classList.contains("death"))) {
        b21.classList.add("green");
    } else if (b21.classList.contains("death")) {
        b21.classList.add("red");
    }
});

登录后复制

这种硬编码的方式不仅重复性高，而且一旦网格大小或布局发生变化，就需要大量修改。我们需要一种方法，能够动态地识别被点击的单元格，并智能地检查其相邻单元格的类名。

解决方案：数据驱动的网格结构与事件处理

核心思想是创建一个JavaScript数据结构，它能清晰地定义每个网格单元格及其对应的DOM元素，以及它所拥有的所有相邻单元格的标识。

1. 构建网格数据结构

首先，定义一个包含所有网格单元格信息的数组。每个元素都是一个对象，存储了单元格的唯一ID、其对应的DOM元素引用，以及一个包含其所有相邻单元格ID的数组。

立即学习“Java免费学习笔记（深入）”；

// 假设 b11, b12 等是已经通过 document.getElementById 或类似方法获取到的DOM元素
const b11 = document.getElementById('b11');
const b12 = document.getElementById('b12');
const b13 = document.getElementById('b13');
// ... 其他单元格DOM元素

const grid = [
  {
    adjacentCells: ['b12', 'b21'], // b11的相邻单元格ID
    cell: b11, // b11的DOM元素
    id: 'b11',
  },
  {
    adjacentCells: ['b11', 'b13', 'b22'], // b12的相邻单元格ID
    cell: b12, // b12的DOM元素
    id: 'b12',
  },
  {
    adjacentCells: ['b12', 'b23'], // b13的相邻单元格ID
    cell: b13, // b13的DOM元素
    id: 'b13',
  },
  // ... 为网格中的所有单元格填充类似的数据
  // 例如，对于 b21:
  {
    adjacentCells: ['b11', 'b22', 'b31'],
    cell: document.getElementById('b21'),
    id: 'b21',
  },
  // ... 确保所有单元格及其相邻关系都被准确定义
];

登录后复制

这个 grid 数组是整个交互逻辑的基础。它将视觉上的网格布局抽象成可编程的数据模型。

2. 动态绑定事件监听器

有了结构化的网格数据，我们可以遍历这个数组，为每个单元格的DOM元素动态添加点击事件监听器。这样，所有单元格的交互都将由同一个处理函数来管理。

grid.forEach((element) => {
  element.cell.addEventListener("click", function establishColor() {
    // 交互逻辑将在本函数内部实现
  });
});

登录后复制

3. 实现交互逻辑

在事件监听器内部，我们将实现前面提到的复杂交互规则。这包括首先检查被点击单元格自身的状态，然后根据需要检查其相邻单元格的状态。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

grid.forEach((element) => {
  element.cell.addEventListener("click", function establishColor() {
    // 1. 检查自身是否包含“death”类
    if (this.classList.contains("death")) {
      this.classList.add("red"); // 如果是“死亡”单元格，则变为红色
    } else {
      // 2. 如果不是“死亡”单元格，则检查相邻单元格
      let adjacentGreenFound = false; // 标记是否找到绿色相邻单元格
      for (const adjacentId of element.adjacentCells) {
        const selectedCellData = grid.find((cell) => cell.id === adjacentId);
        if (selectedCellData && selectedCellData.cell.classList.contains("green")) {
          adjacentGreenFound = true;
          break; // 找到一个绿色相邻单元格即可
        }
      }

      // 3. 根据相邻单元格状态决定是否变为绿色
      if (adjacentGreenFound && !this.classList.contains("green")) {
        this.classList.add("green"); // 如果找到绿色相邻单元格，且自身未变绿，则变为绿色
      }
    }
  });
});

登录后复制

完整示例代码（HTML和CSS部分需自行补充）:

假设HTML结构如下：

<div class="grid-container">
    <div id="b11" class="grid-cell"></div>
    <div id="b12" class="grid-cell"></div>
    <div id="b13" class="grid-cell"></div>
    <div id="b21" class="grid-cell"></div>
    <div id="b22" class="grid-cell"></div>
    <div id="b23" class="grid-cell"></div>
    <div id="b31" class="grid-cell"></div>
    <div id="b32" class="grid-cell"></div>
    <div id="b33" class="grid-cell"></div>
</div>

登录后复制

CSS样式：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 50px);
    gap: 5px;
    border: 1px solid #ccc;
    padding: 5px;
}

.grid-cell {
    width: 50px;
    height: 50px;
    border: 1px solid #eee;
    background-color: lightgray;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.grid-cell.green {
    background-color: lightgreen;
}

.grid-cell.red {
    background-color: lightcoral;
}

/* 初始设置一个“死亡”单元格和一些“绿色”单元格用于测试 */
#b22.death {
    background-color: darkgray; /* 初始显示为灰色 */
}
#b11.green {
    background-color: lightgreen; /* 初始为绿色 */
}

登录后复制

JavaScript代码：

// 获取所有单元格的DOM元素
const b11 = document.getElementById('b11');
const b12 = document.getElementById('b12');
const b13 = document.getElementById('b13');
const b21 = document.getElementById('b21');
const b22 = document.getElementById('b22'); // 假设 b22 初始有 'death' 类
const b23 = document.getElementById('b23');
const b31 = document.getElementById('b31');
const b32 = document.getElementById('b32');
const b33 = document.getElementById('b33');

// 定义网格数据结构
const grid = [
  { adjacentCells: ['b12', 'b21'], cell: b11, id: 'b11' },
  { adjacentCells: ['b11', 'b13', 'b22'], cell: b12, id: 'b12' },
  { adjacentCells: ['b12', 'b23'], cell: b13, id: 'b13' },
  { adjacentCells: ['b11', 'b22', 'b31'], cell: b21, id: 'b21' },
  { adjacentCells: ['b12', 'b21', 'b23', 'b32'], cell: b22, id: 'b22' },
  { adjacentCells: ['b13', 'b22', 'b33'], cell: b23, id: 'b23' },
  { adjacentCells: ['b21', 'b32'], cell: b31, id: 'b31' },
  { adjacentCells: ['b22', 'b31', 'b33'], cell: b32, id: 'b32' },
  { adjacentCells: ['b23', 'b32'], cell: b33, id: 'b33' },
];

// 动态绑定事件监听器并实现交互逻辑
grid.forEach((element) => {
  element.cell.addEventListener("click", function establishColor() {
    // 1. 检查自身是否包含“death”类
    if (this.classList.contains("death")) {
      this.classList.add("red"); // 如果是“死亡”单元格，则变为红色
    } else {
      // 2. 如果不是“死亡”单元格，则检查相邻单元格
      let adjacentGreenFound = false; // 标记是否找到绿色相邻单元格
      for (const adjacentId of element.adjacentCells) {
        const selectedCellData = grid.find((cell) => cell.id === adjacentId);
        if (selectedCellData && selectedCellData.cell.classList.contains("green")) {
          adjacentGreenFound = true;
          break; // 找到一个绿色相邻单元格即可
        }
      }

      // 3. 根据相邻单元格状态决定是否变为绿色
      if (adjacentGreenFound && !this.classList.contains("green")) {
        this.classList.add("green"); // 如果找到绿色相邻单元格，且自身未变绿，则变为绿色
      }
    }
  });
});

// 可以在加载时给某些单元格添加初始类，例如：
document.getElementById('b22').classList.add('death'); // 初始设置b22为死亡单元格
document.getElementById('b11').classList.add('green'); // 初始设置b11为绿色单元格

登录后复制

注意事项与优化

DOM元素获取： 在构建 grid 数组时，确保所有 cell 属性都正确引用了相应的DOM元素。通常使用 document.getElementById() 或 document.querySelectorAll() 结合循环来初始化。
边界条件： 对于位于网格边缘或角落的单元格，其 adjacentCells 数组应只包含实际存在的相邻单元格ID，确保逻辑的准确性。
性能考虑： 对于非常大的网格（例如，数百个单元格），在每次点击事件中频繁使用 grid.find() 来查找相邻单元格可能会影响性能。可以考虑在 grid 数组初始化时，将 adjacentCells 中的ID直接替换为对应的DOM元素引用，或创建ID到DOM元素的映射表，以减少查找开销。
```
// 优化后的 grid 结构示例（将 adjacentCells 存储为 DOM 元素引用）
const gridOptimized = [
    {
        adjacentCells: [b12, b21], // 直接存储DOM元素
        cell: b11,
        id: 'b11',
    },
    // ...
];
// 相应的，事件处理逻辑中可以直接访问 selectedCellData.cell
```
登录后复制
可扩展性： 这种数据驱动的方法极大地提高了代码的可维护性和可扩展性。若要修改网格布局、添加新的交互规则或改变单元格类型，只需修改 grid 数组的定义或事件处理逻辑，而无需改动大量重复代码。
CSS样式： 确保 .green 和 .red 等样式类已在CSS中定义，以提供相应的视觉反馈。