井字游戏不变色答案

【问题标题】：Tic Tac Toe not changing colors井字游戏不变色
【发布时间】：2014-05-19 22:19:41
【问题描述】：

我正在使用 Jquery 和 CSS 制作一个基本的井字游戏。我想让它点击 div 添加玩家一的颜色，而 dblclicking 添加玩家二的颜色。由于某种原因，playerOne 的颜色没有改变。

HMTL

<body>
 <table>
  <tr></tr>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
  <tr></tr>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
  <tr></tr>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
 </table>

CSS

table{
  margin-left:auto; 
  margin-right:auto;
  border-spacing:7px;
}
.dot{
  border: 1px solid #A8A8A8;
  border-radius:50px;
  height:100px;
  width:100px;
  background-color:#A8A8A8;
}
.playerOne{
  border: 1px solid #A8A8A8;
  border-radius:50px;
  height:100px;
  width:100px;
  background-color:red;
}

JavaScript

$(document).ready(function() {
  $('div').click(function() {
    $(this).addClass('playerOne');
  });
});

【问题讨论】：

为我工作jsfiddle.net/Yw66x
为什么它对我不起作用。我正在使用 CodePen
想通了。在 JavaScript 下未启用 Jquery。还是谢谢。

标签： javascript jquery html css

【解决方案1】：

您忘记引用 JQuery 了吗？将此添加到代码上方的 HTML 页面中。

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

【讨论】：

你可能希望使用更新版本的 jQuery，1.7.1 已经很老了 ;)

【解决方案2】：

您也可以为 event.target 参数着色

见http://jsfiddle.net/Icepickle/GbyAY/

$(function() {
    $('div').on('click', function(e) {
        $(e.target).addClass('playerOne');
    });
});

【讨论】：