Отключение div после щелчка и повторное включение

Поэтому я пытаюсь создать JavaScript Tic-Tac-Toe как часть проекта front end FCC, и у меня возникли проблемы с 2 конкретными областями.

  1. Отключение div от кликабельности до выбора O или X. (без этой функции клики все еще регистрируются, и это говорит, что игрок выиграл только с пустыми полями.

  2. Отключение div от повторного нажатия, как только он отмечен и возможность сбросить это, как только игра закончена или кнопка сброса нажата.

Я пробовал разные способы достичь этого, но не имел большого успеха.

Вот мой код:

EDIT: я внес некоторые изменения в код, чтобы решить первую проблему.
Но у меня все еще проблемы со второй частью. Я все еще могу щелкнуть коробки после того, как он щелкнул, что изменяет метку на коробке и портит условие рисования.

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

1 ответ

  1. Для вашей второй части вы можете поместить в CSS, как следующее:

    .myDiv
    {
        pointer-events:none; 
    }
    

    Это отключает щелчок внутри div

    Тогда вы можете просто отключить его или включить его с помощью javascript, например:

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