我正在尝试创建一个tictactoe游戏。玩家1选择他的标记x或o，然后出现tictactoe板。玩家1的标记（例如x）会在其悬停在一个空单元格上时以0.5的不透明度出现。单击时，该单元格会接收一个.addClass（“ clicked”），该标记会以1的不透明度将标记插入该单元格。我有一个.toggleClass函数，可以在播放器标记之间切换。我希望玩家1的x保留在棋盘上，而玩家2的悬停则在任何空白单元格上显示一个o。我遇到的问题是，在单击一个单元格以添加我的x后，整个面板会切换类。我希望每个没有类“单击”的单元格进行切换。我怎样才能做到这一点？
这是如果玩家1选择x的代码
case "x":
$(function(){
$(".board").addClass("o");
$("td").click(function(){
$(this).children("p").addClass("clicked x");
$(".board").toggleClass("x o");
});
});
break;
的CSS
.x td:hover p {
content:url("images/X.png");
opacity:0.5;
cursor:pointer;
}
.o td:hover p {
content:url("images/O.png");
opacity:0.5;
cursor:pointer;
}
.x .clicked {
content:url("images/X.png");
opacity:1;
}
.o .clicked {
content:url("images/O.png");
opacity:1;
}
的HTML
<table class="hidden board" cellspacing="0">
<p class="bigTitle hidden" id="turn">Player Turn</p>
<tbody>
<tr>
<td id="a1"><p></p></td>
<td id="a2"><p></p></td>
<td id="a3"><p></p></td>
</tr>
<tr>
<td id="b1"><p></p></td>
<td id="b2"><p></p></td>
<td id="b3"><p></p></td>
</tr>
<tr>
<td id="c1"><p></p></td>
<td id="c2"><p></p></td>
<td id="c3"><p></p></td>
</tr>
</tbody>
</table>
将功能添加到每个单独的单元而不是板上，并在功能内检查该单元是否具有clicked该类。
$(function(){
$(".board td").addClass("o");
$("td").click(function(){
if( $(this).hasClass('clicked') ) {
$(this).children("p").addClass("clicked x");
$(this).toggleClass("x o");
}
});
});
相应地修改CSS选择器，例如
td.o:hover p { ...
.x.clicked { ...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句