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

Question

所以我正在尝试创建一个 JavaScript Tic-Tac-Toe 作为 FCC 前端元素的一部分，但我在 2 个特定领域遇到了问题。

1. 在选择 O 或 X 之前禁止 div 可点击。 (如果没有这个功能，点击仍然会被记录下来，并且它说玩家赢了只是空白框。

2. 禁止 div 在被标记后被重新点击，并在游戏结束或按下重置按钮后能够重置它。

我尝试了不同的方法来实现这一目标，但收效甚微。

这是我的代码:

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

$(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);
});

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;
}

<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>

Answer 1

对于第二部分，您可以像下面这样放入 CSS:

.myDiv
{
    pointer-events:none; 
}

这将禁止在 div 内单击

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

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