声明多个 document.getElementById('');几行变量

Question

我正在制作一个象棋游戏作为一个有趣的项目。我设置它的方式涉及每个方块一个变量，截至目前，这需要我 64 行代码。

变量名要和ID一致

我当前的代码：

const a1 = document.getElementById('a1');
const a2 = document.getElementById('a2');
const a3 = document.getElementById('a3');
const a4 = document.getElementById('a4');
const a5 = document.getElementById('a5');
const a6 = document.getElementById('a6');
const a7 = document.getElementById('a7');
const a8 = document.getElementById('a8');

（再进行 7 组，每组 8 个）

我还没有尝试过其他任何东西，因为我不确定从哪里开始。

有什么方法可以缩短这个吗？提前致谢！

Answer 1

直接回答你的问题：使用循环并将所有数据添加到数组中：

const board = [...new Array(64)].map((_, i) => document.getElementById("a" + i));

您可以像这样访问每个元素：

board[3];
board[32];

等等，但我永远不会用这么多 ID 那样构建我的 HTML。

更好的方法是只查询父元素并获取其子元素，例如：

<div id="board">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  ...
</div>

然后在您的 JavaScript 中您可以：

const board = document.getElementById("board").children;

砰，一切都为你准备好了：

board[0];
board[77];
board[5];
// yay

// e.g. listen for clicks on any square
board.forEach((square, i) => square.addEventListener("click", e => {
  console.log(`You clicked square #${i}!`);
}));

声明多个 document.getElementById('');几行变量

Declare multiple document.getElementById(''); variables in few lines

javascript