单击后禁用div并重新启用它

Question

所以我试图创建一个JavaScript Tic-Tac-Toe作为FCC前端项目的一部分，我在2个特定领域遇到了麻烦。

1. 在选择O或X之前禁止div可点击。 （没有这个功能，点击仍然会被注册，并且表示玩家只用空白框赢了。

2. 禁用div一旦被标记就被重新点击，并且一旦游戏结束或按下重置按钮就能重置div。

我尝试过不同的方法来实现这一目标，但没有取得多大成功。

这是我的代码：

编辑：我已对代码进行了一些修改以解决第一个问题。 但我仍然遇到第二部分的问题。单击后我仍然可以单击这些框，这会更改框上的标记并弄乱绘制条件。

＆＃13;
＆＃13;
$(document).ready(function() {
  var user;
  var ai;
  var aiOwn = [];
  var userOwn = [];
  var currentTurn;
  var moves = 0;

  var handler = function() {
    if (user === '') {
      moves = 0;
    }
    else {
      $(this).text(currentTurn);
      moves = moves + 1;
      checkWin();
      draw();
      next();
    };
  };

  function clearBoard() {
    document.getElementById("o").disabled = false;
    document.getElementById("x").disabled = false;
    $('.box').text(' ');
    moves = 0;
    user = '';
    ai = '';
  };

  function draw() {
    if (moves >= 9) {
      alert("Draw!");
      clearBoard();
    };
  };

  function checkWin() {
    switch (true) {
      case $('#1').text() === currentTurn && $('#2').text() === currentTurn &&
      $('#3').text() === currentTurn:
        alertWin();
        break;
      case $('#4').text() === currentTurn && $('#5').text() === currentTurn &&
      $('#6').text() === currentTurn:
        alertWin();
        break;
      case $('#7').text() === currentTurn && $('#8').text() === currentTurn &&
      $('#9').text() === currentTurn:
        alertWin();
        break;
      case $('#1').text() === currentTurn && $('#4').text() === currentTurn &&
      $('#7').text() === currentTurn:
        alertWin();
        break;
      case $('#2').text() === currentTurn && $('#5').text() === currentTurn &&
      $('#8').text() === currentTurn:
        alertWin();
        break;
      case $('#3').text() === currentTurn && $('#6').text() === currentTurn &&
      $('#9').text() === currentTurn:
        alertWin();
        break;
      case $('#1').text() === currentTurn && $('#4').text() === currentTurn &&
      $('#9').text() === currentTurn:
        alertWin();
        break;
      case $('#3').text() === currentTurn && $('#5').text() === currentTurn &&
      $('#7').text() === currentTurn:
        alertWin();
        break;
      default:
    }
  };

  function alertWin() {
    if (currentTurn == user) {
      alert('Player 1 Win!');
      clearBoard();
    } else {
      alert('Player 2 Wins!');
      clearBoard();
    }
  };

  $('#o').click(function() {
    document.getElementById("o").disabled = true;
    document.getElementById("x").disabled = true;
    user = 'o';
    currentTurn = 'o';
    ai = 'x';
  });

  $('#x').click(function() {
    document.getElementById("o").disabled = true;
    document.getElementById("x").disabled = true;
    user = 'x';
    currentTurn = 'x';
    ai = 'o';
  });

  function next() {
    if (currentTurn == user) {
      currentTurn = ai;
    } else {
      currentTurn = user;
    }
  };

  $('#reset').on('click', clearBoard);

  $('.box').on('click', handler);
});
＆＃13;
body {
  background-color: #3AB567;
  height: 100%;
  width: 100%;
}
* {
  color: #333;
  text-align: center;
}

h1{
  text-align: center;
  color: white;
}

button{
  text-align: center;
  width: 60px;
  height: 40px;
  color: black;
  margin: 10px;
}
.board {
  width: 600px;
  height: 600px;
  background-color:#FFD2AD;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px;
  position:relative;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 5px;
  border-radius: 10px;
  border-style: solid;
  border-color: #BFAC82;
}
.box{
  width: 194px;
  height: 194px;
  border:1px solid;
  border-color: white;
  float: left;
  background-color: #FFD2AD;
  font-size:100px;
}
div.box:hover {
      background-color: darken(#FFD2AD, 5);
    }

div{
  text-align: center;
  color: white;
  padding: 10px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div container = 'container-fluid center'>
  <h1> Tic Tac Toe </h1>
  <button id = 'o' class ='btn'> O </button>
  <button id = 'x' class ='btn'> X </button>
  <button id= 'reset' class = 'btn'>RESET</button>
  <div class = 'board'>
   <div id = '1' class="box no-element"></div>
   <div id = '2' class="box no-element"></div>
   <div id = '3' class="box no-element"></div>
   <div id = '4' class="box no-element"></div>
   <div id = '5' class="box no-element"></div>
   <div id = '6' class="box no-element"></div>
   <div id = '7' class="box no-element"></div>
   <div id = '8' class="box no-element"></div>
   <div id = '9' class="box no-element"></div>
 </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

对于你的第二部分，你可以像下面那样输入CSS：

.myDiv
{
    pointer-events:none; 
}

这会禁用在div中单击

然后您可以禁用它或使用javascript启用它，例如：

document.styleSheets[0].cssRules[0].style.removeProperty("pointer-events");