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

Question

我正在制作国际象棋游戏作为一个有趣的项目。我设置它的方式涉及每个方 block 一个变量，截至目前，这需要我 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}!`);
}));