title: Disable .toggleClass after an element has been clicked
body: <p>I am trying to create a tictactoe game. Player 1 selects his marker, x or o, then the tictactoe board appears. Player 1's marker, let's say x, will appear at 0.5 opacity whenever he hovers over an empty cell. On click, the cell receives a .addClass("clicked"), which inserts the marker into the cell at 1 opacity. I have a .toggleClass function to switch between player markers. I would like player 1's x to remain on the board, while player 2's hovers show an o on any empty cell. The issue I am having is that after I click on a cell to add my x in, the entire board toggles class. I want every cell that does not have the class "clicked" to toggle. How can I do this?</p>
  
  <p>Here is the code if player 1 chooses x</p>
  
  <pre><code>case "x":
      $(function(){
          $(".board").addClass("o");
          $("td").click(function(){
              $(this).children("p").addClass("clicked x");
              $(".board").toggleClass("x o");
          });
      });
      break;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>        &lt;table class="hidden board" cellspacing="0"&gt;
              &lt;p class="bigTitle hidden" id="turn"&gt;Player Turn&lt;/p&gt;
              &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td id="a1"&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;
                  &lt;td id="a2"&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;
                  &lt;td id="a3"&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="b1"&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;
                  &lt;td id="b2"&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;
                  &lt;td id="b3"&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;    
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="c1"&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;
                  &lt;td id="c2"&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;
                  &lt;td id="c3"&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;    
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>