Deaktiviere .toggleClass, nachdem auf ein Element geklickt wurde

Question

Ich versuche ein Tictactoe-Spiel zu erstellen. Spieler 1 wählt seinen Marker, x oder o, dann erscheint das Tictactoe Board. Der Marker von Spieler 1, sagen wir x, erscheint bei einer Deckkraft von 0,5, wenn er über eine leere Zelle schwebt. Beim Klicken erhält die Zelle eine .addClass ("geklickt"), die den Marker bei einer Deckkraft in die Zelle einfügt. Ich habe eine .toggleClass-Funktion, um zwischen Spielermarkern zu wechseln. Ich möchte, dass Spieler 1 x auf dem Brett bleibt, während Spieler 2 auf einer leeren Zelle ein o zeigt. Das Problem, das ich habe, ist, dass, nachdem ich auf eine Zelle geklickt habe, um mein x hinzuzufügen, das gesamte Brett die Klasse wechselt. Ich möchte jede Zelle, die nicht die Klasse "geklickt" hat, umschalten. Wie kann ich das machen? Hier

ist der Code, wenn Spieler 1 wählt 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

die Funktion jeder einzelnen Zelle hinzufügen anstelle des Brettes und Scheck innerhalb der Funktion, wenn die Zelle die Klasse clicked hat.

$(function(){ 
    $(".board td").addClass("o"); 
    $("td").click(function(){ 
     if($(this).hasClass('clicked')) { 
      $(this).children("p").addClass("clicked x"); 
      $(this).toggleClass("x o"); 
     } 
    }); 
}); 

Ändern Sie die CSS-Selektoren, Beispiel

td.o:hover p { ... 
.x.clicked { ...