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

Question

因此，我正在尝试创建一个JavaScript Tac Toe作为FCC前端项目的一部分，我在两个特定领域遇到了麻烦。

1. 禁用div，直到选择O或X之后才可单击。(如果没有这个功能，点击仍然会被注册，并且表示玩家只在空格内获胜。
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");