Question

我有一个函数，它在计数器为偶数时添加一个类 oPiece，而在奇数时添加一个类 xPiece。但是，当前的 for 循环仅在每次单击 div（带有 class=box）时添加类 xPiece

JS

$('.box').click(function() {
  for (var i = 0; i < 8; i++) {
    if (i % 2 == 0) {
      $(this).addClass('oPiece');
    } else {
      $(this).addClass('xPiece');
    }
  }
});

HTML

<div class="container">
  <div class="box" id="1"></div>
  <div class="box" id="2"></div>
  <div class="box" id="3"></div>
  <div class="box" id="4"></div>
  <div class="box" id="5"></div>
  <div class="box" id="6"></div>
  <div class="box" id="7"></div>
  <div class="box" id="8"></div>
  <div class="box" id="9"></div>
</div>
<button class="resetBtn">Reset</button>

CSS

.container {
  width: 240px;
  height: 240px;
  border: 2px solid gray;
  display: block;
  padding: 0;
  font-size: 0;
  margin: auto;
}
.box {
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border: 1px solid gray;
  display: inline-block;
  align-items: center;
  justify-content: center;
}
.oPiece {
  background-color: blue;
}
.xPiece {
  background-color: red;
}
.resetBtn {
  display: block;
  margin: 20px auto;
}

这是我的代码笔的链接 --> https://codepen.io/jdk301/pen/LYbeeOX

Answer 1

当点击div(class=box)时，会执行一次for语句。在 for 语句的最后，i 的值是 7，所以 div addclass 总是 'xPiece'。

修改js代码：

    let num = 0;
$('.box').click(function() {
  // for (let i = 0; i < 8; i++) {
  //   console.log(i)
  //   if (i % 2 == 0) {
  //     $(this).addClass('oPiece');
  //   } else {
  //     $(this).addClass('xPiece');
  //   }
  // }
  num++;
     if (num % 2 == 0) {
      $(this).addClass('oPiece');
    } else {
      $(this).addClass('xPiece');
    }

});

如何在井字游戏的偶数/奇数元素之间切换

1 个答案: