一个元素被点击后禁用.toggleClass

Question

我想创建一个tictactoe游戏。玩家1选择他的标记，x或o，然后出现tictactoe板。玩家1的标记，比方说x，每当他悬停在空单元格上时，就会出现0.5不透明度。单击时，单元格会收到一个.addClass（“单击”），它将以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> 

Answer 1

添加的功能，每个单独的小区，而不是板，并检查如果单元格具有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 { ...