有人可以解释为什么会发生这种情况吗？

Question

const chessBoard = document.querySelector("#board");
let aSwitch = true; // define a switch to create black & white square
let increment = 1; // will be use to determine the row of the board

for (let i = 0; i < 64; i++) {
  let square = document.createElement("div");
  square.classList.add("square");

  if (aSwitch === true) {
    square.classList.add("white");
    aSwitch = false;
   } else {
        square.classList.add("black");
    aSwitch = true;
  }

  if (i === 7 * increment) {
    increment++;
   aSwitch = !aSwitch;
  } // ensure that the next row will follow a checkered pattern
  chessBoard.append(square);
}

输出：

但是，如果我将序列更改为

i === 8 * increment

，则输出为：

请帮助我理解这个现象，因为我很愚蠢和困惑，非常感谢！

我确实尝试使用互联网，我想到的最好的办法是正方形处于 0 索引序列中，但是当我尝试使用方程

7 * increment

时，输出也是错误的：

Answer 1

行尾的正确检查是

i % 8 === 7

由于一行中有 8 个单元格，因此您需要每 8 个单元格开始一个新行，该行的索引（基于 0 的索引）为 7、15、23 等，即

i % 8 == 7

您还可以稍微简化您的代码：

const chessBoard = document.querySelector("#board");
let aSwitch = true; // define a switch to create black & white square

for (let i = 0; i < 64; i++) {
  let square = document.createElement("div");
  square.classList.add("square");

  square.classList.add(aSwitch ? "white" : "black");
  aSwitch = !aSwitch;

  if (i % 8 === 7) {
    aSwitch = !aSwitch;
  } // ensure that the next row will follow a checkered pattern
  chessBoard.append(square);
}

#board { width: 160px; height: 160px; border: 1px solid black; }

.square { width: 20px; height: 20px; float: left; }

.white { background-color: white; }

.black { background-color: black; }

<div id="board">
</div>

Answer 2

你的做法不正确：

7 * increment

会给出 7, 14, 21, ... 所以你正在检查第 8 个方格，然后检查第 15 个、第 22 个，依此类推。

8 * increment

会再次给出 8、16、24、...。这不是你想要的。

您需要使用余数运算符

%

：表达式

i % 8 === 0

在第 9、17、25、... 方格处将为 true。