Question

我正在编写一个tic tac toe游戏。在用户选择谁开始以及是否使用X或O之后，他可以将鼠标悬停在空网格上，并且X或O似乎向用户显示他可以移动到那里。当用户点击他希望继续前进的网格时，X或O将保留在那里并且移动将是永久性的。目前我有这个工作但是以一种非常奇怪的方式。这是代码：

$('td').hover(moveHover);
$('td').mouseleave(function(){
    $(this).html('');
});
$('td').click(move);

function move(){
    $(this).unbind();
}   

function moveHover(){
    if (xO === 'X'){
        $(this).append('<i class="fa fa-times fa-5x"></i>');
        $('td i').css('color', '#ccc');
    }
    if (xO === 'O'){
        $(this).append('<i class="fa fa-circle-o fa-5x"></i>');
        $('td i').css('color', '#ccc');
    }       
}

click事件处理程序仅从元素中取消绑定任何单击事件处理程序。它实际上并没有将X或O图标作为子元素附加。但是，当我点击一个空网格时，无论如何都会添加一个图标。这里是link所有代码，如果您想自己尝试一下。我想知道这怎么可能？

Answer 1

你现在做的是在悬停时添加并移除：

$('td').mouseleave(function() {
    $(this).html('');
});

单击后，您已经悬停，因此附加了X或O. 但是你还没有解开（mouseleave），所以它还没有删除。正如你现在点击并因此取消绑定所有内容，你解除了绑定鼠标，所以它永远不会被删除。

这实际上是一个非常聪明的解决方案。

竖起大拇指的图形也是如此！

Answer 2

这是一个CSS问题，代码使用了Bootstrap和Font-Awesome CSS样式，我已经将代码附加到这里的代码段中（单击下面的“运行”按钮），并看到它正在运行。：）

$(document).ready(function() {
  var xO = '';
  var xOClass = '';
  var whoStart = '';
  var option1 = $('.option1').html();
  var option2 = $('.option2').html();
  var choice = $('.choice').html();

  $('.choose').click(choose);

  function choose(e) {
    e.preventDefault();
    if ($('.choice h2').text() === 'Who starts?') {
      whoStart = $(this).children('p').text().substr(0, $(this).children('p').text().indexOf(' '));
      $('.option1 p, .option2 p').empty();
      $('.choice h2').remove();
      $('.choice').prepend('<a href="#" class="restart"><h2>Restart Game</h2></a>');
      $('.restart').hover(function() {
        $('.restart h2').css('color', '#000');
      });
      $('.restart').mouseleave(function() {
        $('.restart h2').css('color', '#777');
      });
      $('.restart').click(restart);
      $('.option1 a').remove();
      $('.option2 a').remove();
      $('.choice').css('height', '100px');
      $('td').hover(moveHover);
      $('td').mouseleave(function() {
        $(this).html('');
      });
      $('td').click(move);
    }
    if ($('.choice h2').text() === 'X or O?') {
      xO = $(this).children('p').text().substr(13);
      $('.choice h2').text('Who starts?');
      $('.option1 i').removeClass('fa-times').addClass('fa-laptop');
      $('.option1 p').text('Computer starts');
      $('.option2 i').removeClass('fa-circle-o').addClass('fa-user');
      $('.option2 p').text('Player starts');
    }
  }

  function restart(e) {
    e.preventDefault();
    $('.option1').empty().html(option1);
    $('.option2').empty().html(option2);
    $('.choice').empty().html(choice);
    $('.choose').click(choose);
    $('td').unbind();
    $('td').empty();
  }

  function move() {
    $(this).unbind();
  }

  function moveHover() {
    console.log(xO, this);
    if (xO === 'X') {
      $(this).append('<i class="fa fa-times fa-5x"></i>');
      $('td i').css('color', '#ccc');
    }
    if (xO === 'O') {
      $(this).append('<i class="fa fa-circle-o fa-5x"></i>');
      $('td i').css('color', '#ccc');
    }
  }
});

h1,
.col-xs-4,
.col-xs-12 {
  text-align: center;
}

h1,
h2 {
  color: #777;
}

a {
  color: #777;
}

td {
  width: 150px;
  height: 150px;
}

table {
  width: 450px;
  margin: 0 auto;
}

.middle {
  box-shadow: 0 -1px 0 #777, 0 1px 0 #777;
}

.center {
  box-shadow: -1px 0 0 #777, 1px 0 0 #777;
}

.middle.center {
  box-shadow: 0 -1px 0 #777, 0 1px 0 #777, -1px 0 0 #777, 1px 0 0 #777;
}

a:hover,
a:focus,
a:active {
  color: #000;
  text-decoration: none;
}

.container {
  min-width: 500px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <h1>Tic Tac Toe</h1>
  <div class="row">
    <div class="col-xs-4 option1">
      <a href="#" class="choose">
        <i class="fa fa-times fa-5x"></i>
        <p>I want to be X</p>
      </a>
    </div>
    <div class="col-xs-4 choice">
      <h2>X or O?</h2>
    </div>
    <div class="col-xs-4 option2">
      <a href="#" class="choose">
        <i class="fa fa-circle-o fa-5x"></i>
        <p>I want to be O</p>
      </a>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <table>
        <tr>
          <td class="top left"></td>
          <td class="top center"></td>
          <td class="top right"></td>
        </tr>
        <tr>
          <td class="middle left" id=></td>
          <td class="middle center"></td>
          <td class="middle right"></td>
        </tr>
        <tr>
          <td class="bottom left"></td>
          <td class="bottom center"></td>
          <td class="bottom right"></td>
        </tr>
      </table>
    </div>
  </div>
</div>

即使click事件处理程序取消绑定所有处理程序，Click事件也会执行click和hover事件处理程序

2 个答案: