Question

以下是我正在处理的完整代码：

https://codepen.io/sygilmore89/pen/BREvqG?editors=1010

我遇到的确切问题是最后的if / else语句没有像我希望的那样触发。我添加了计数器变量，并列出它以验证它是否符合我需要的数字，以便考虑产生特定结果的确切点击顺序。如果玩家没有按照确切的顺序进行游戏，那么游戏应该以另一种方式结束。

我很困惑，因为我没有看到它是如何不触发计数器是三而左下方div没有文本。它不是将X放在应该到达的位置，而是继续触发else语句。我可能应该废弃它并完全尝试另一种方法，但在这一点上我只是为什么那条确切的行不起作用而感到困惑。

$(document).ready(function() {

  var counter = 0;

  $("#letterChoice").hide();

  $("#button1").on("click", function() {
    $("#letterChoice").show();
  });

  $("#buttonR").on("click", function() {
    $("#letterChoice").show();
    $("#topLeft").text("");
    $("#topLeft").off("click");
    $("#topCenter").text("");
    $("#topCenter").off("click");
    $("#topRight").text("");
    $("#topRight").off("click");
    $("#middleLeft").text("");
    $("#middleLeft").off("click");
    $("#middleMid").text("");
    $("#middleMid").off("click");
    $("#middleRight").text("");
    $("#middleRight").off("click");
    $("#bottomLeft").text("");
    $("#bottomLeft").off("click");
    $("#bottomMid").text("");
    $("#bottomMid").off("click");
    $("#bottomRight").text("");
    $("#bottomRight").off("click");
    counter = 0;
    $("#test").text(counter);
  });

  $("#buttonX").on("click", function() {

    $("#middleMid").text("O");
    $("#middleMid").off("click");

    if ($("#topLeft").text("")) {
      $("#topLeft").on("click", function() {
        $("#topLeft").text("X");
        $("#topCenter").text("O");
        counter++; //1
        $("#test").text(counter);
      });
    }
    if ($("#bottomMid").text("")) {
      $("#bottomMid").on("click", function() {
        $("#bottomMid").text("X");
        $("#middleLeft").text("O");
        counter++;
        $("#test").text(counter);
      });
    }
    if ($("#middleRight").text("")) {
      $("#middleRight").on("click", function() {
        $("#middleRight").text("X");
        $("#topRight").text("O");
        counter++;
        $("#test").text(counter);
      });

    }
    if ($("#bottomLeft").text("") && counter == 3) {
      $("#bottomLeft").on("click", function() {
        $("#bottomLeft").text("X");
        $("#bottomRight").text("O");
      });

    } else {

      $("#bottomLeft").on("click", function() {
        $("#bottomLeft").text("X");
        $("#bottomMid").text("O");
        $("#topLeft").off("click");
        $("#topCenter").off("click");
        $("#topRight").off("click");
        $("#middleLeft").off("click");
        $("#middleMid").off("click");
        $("#middleRight").off("click");
        $("#bottomLeft").off("click");
        $("#bottomMid").off("click");
        $("#bottomRight").off("click");
      });

    }

  });

});

body {
  margin-top: 15px;
}

#board {
  background-color: white;
  width: 480px;
  height: 480px;
}

.title {
  margin-bottom: 15px;
}

#topLeft {
  border: 1px solid black;
  height: 160px;
  width: 160px;
  font-size: 92.5px;
}

#topCenter {
  border: 1px solid black;
  height: 160px;
  width: 160px;
  font-size: 92.5px;
}

#topRight {
  border: 1px solid black;
  height: 160px;
  width: 160px;
  font-size: 92.5px;
}

#middleLeft {
  border: 1px solid black;
  height: 160px;
  width: 160px;
  font-size: 92.5px;
}

#middleMid {
  border: 1px solid black;
  height: 160px;
  width: 160px;
  font-size: 92.5px;
}

#middleRight {
  border: 1px solid black;
  height: 160px;
  width: 160px;
  font-size: 92.5px;
}

#bottomLeft {
  border: 1px solid black;
  height: 160px;
  width: 160px;
  font-size: 92.5px;
}

#bottomMid {
  border: 1px solid black;
  height: 160px;
  width: 160px;
  font-size: 92.5px;
}

#bottomRight {
  border: 1px solid black;
  height: 160px;
  width: 160px;
  font-size: 92.5px;
}

#buttonX {
  margin-bottom: 20px;
  box-shadow: 0px 0px 1px 1px black;
  border-radius: 2px;
  outline: none;
  background-color: #ccc;
}

#buttonR {
  margin-bottom: 20px;
  box-shadow: 0px 0px 1px 1px black;
  border-radius: 2px;
  outline: none;
  background-color: #ccc;
}

#buttonO {
  margin-bottom: 20px;
  box-shadow: 0px 0px 1px 1px black;
  border-radius: 2px;
  outline: none;
  background-color: #ccc;
}

#button1 {
  margin-bottom: 20px;
  box-shadow: 0px 0px 1px 1px black;
  border-radius: 2px;
  outline: none;
  background-color: #ccc;
}

#letterChoice {
  margin-left: 33.5px;
}

#choices {
  margin-left: 175px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

<div class="container text-center" id="board">
  <h1 class="title">Tic Tac Toe</h1>
  <div class="row" id="choices">
    <input type="button" value="New Game" id="button1" />
    <div id="letterChoice"><input type="button" value="X" id="buttonX" /> or <input type="button" value="O" id="buttonO" /></div>
  </div>
  <div><input type="button" value="Reset" id="buttonR" /></div>
  <div id="test">Test it</div>
  <div class="row" id="topRow">
    <div id="topLeft">
    </div>
    <div id="topCenter">
    </div>
    <div id="topRight">
    </div>
  </div>
  <div class="row" id="middleRow">
    <div id="middleLeft">
    </div>
    <div id="middleMid">
    </div>
    <div id="middleRight">
    </div>
  </div>
  <div class="row" id="bottomRow">
    <div id="bottomLeft">
    </div>
    <div id="bottomMid">
    </div>
    <div id="bottomRight">
    </div>
  </div>
</div>

Answer 1

您的条件是设置文本并评估结果，而不是检查它是否等于空字符串。你在寻找：

if($("#bottomLeft").text() == '' && counter == 3)

现有代码发生了什么，它将文本设置为空字符串，然后计算结果，这是一个始终评估为true的jQuery对象。

无法获取If / Else语句来触发

1 个答案: