要素がクリックされた後で.toggleClassを無効にする

Question

tictactoeゲームを作成しようとしています。プレイヤー1が自分のマーカーxまたはoを選択すると、tictactoeボードが表示されます。プレイヤー1のマーカーは、xと言うことがありますが、空のセルを移動するたびに0.5の不透明度で表示されます。クリックすると、セルは1つの不透明度でセルにマーカーを挿入する.addClass（ "クリック"）を受け取ります。私はプレーヤーのマーカーを切り替えるための.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 { ...