Question

我正在使用Jquery和CSS制作一个基本的tic tac toe游戏。我想这样做，以便点击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');
  });
});

Answer 1

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

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

Answer 2

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

请参阅http://jsfiddle.net/Icepickle/GbyAY/

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

Tic Tac Toe不改变颜色

2 个答案: