如何解决如何在井字游戏的偶数/奇数元素之间切换
我有一个函数,它在计数器为偶数时添加一个类 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
解决方法
当点击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');
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。