一個元素被點擊後禁用.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 { ...