这是使用Jquery的Javascript井字游戏。我可以在winCondition函数之后放入“ debugger”，并在控制台（“ .top”）中获得“ winCondition”的适当值，但无法使此函数正常工作。如果没有“调试器”，它将返回并在控制台中清空集（“ []”）。
jQuery：
$(document).ready(function () {
var move = "X",
movestate = true,
winCondition = [
[".top", ".top", ".top"],
[".mid", ".mid", ".mid"],
[".bot", ".bot", ".bot"],
[".l", ".l", ".l"],
[".c", ".c", ".c"],
[".r", ".r", ".r"],
[".top, .l", ".mid, .c", ".bot ,.r"],
[".top, .r", ".mid, .c", ".bot, .l"]
];
$(".square").click(function(){ //to mark squares
if ($(this).html() !== "") { //if square is not empty
return;
}
if (movestate === true){
move = "X";
movestate = false;
}
else {
move = "O";
movestate = true;
}
$(this).html(move); //mark square
for (var i = 0; i < winCondition.length; i++) {
if ($(winCondition[0]).innerText == "") {
return;
}
if (($(winCondition[i][0]).innerText == $(winCondition[i][1]).innerText) && ($(winCondition[i][0]).innerText == $(winCondition[i][2]).innerText)) {
// check to see if game is won
alert($(winCondition[i][0]).innerText+" wins!");
}
}
});
});
HTML：
<!doctype=html>
<head>
<meta charset="UTF-8">
<title>Three in a Row</title>
<link rel="stylesheet" href="style.css">
<script src="../jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="javatoe2.js"></script>
</head>
<body>
<div id = "board">
<div id="t1" class="square top l"></div>
<div id="t2" class="square top c"></div>
<div id="t3" class="square top r"></div>
<div id="m1" class="square mid l"></div>
<div id="m2" class="square mid c"></div>
<div id="m3" class="square mid r"></div>
<div id="b1" class="square bot l"></div>
<div id="b2" class="square bot c"></div>
<div id="b3" class="square bot r"></div>
</div>
</body>
</html>
编辑：
对于将来的求职者，以下是现在可用的代码-
<!doctype=html>
<head>
<meta charset="UTF-8">
<title>Three in a Row</title>
<link rel="stylesheet" href="style.css">
<script src="../jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="javatoe.js"></script>
</head>
<body>
<div id = "board">
<div id="t1" class="1 square top l"></div>
<div id="t2" class="2 square top c"></div>
<div id="t3" class="3 square top r"></div>
<div id="m1" class="4 square mid l"></div>
<div id="m2" class="5 square mid c"></div>
<div id="m3" class="6 square mid r"></div>
<div id="b1" class="7 square bot l"></div>
<div id="b2" class="8 square bot c"></div>
<div id="b3" class="9 square bot r"></div>
</div>
</body>
</html>
--
$(document).ready(function () {
var move = "X",
movestate = true,
winCondition = [
[".1", ".2", ".3"],
[".4", ".5", ".6"],
[".7", ".8", ".9"],
[".1", ".4", ".7"],
[".2", ".5", ".8"],
[".3", ".6", ".9"],
[".1", ".5", ".9"],
[".3", ".5", ".7"]
];
$(".square").click(function(){ //to mark squares
if ($(this).html() !== "") { //if square is not empty
return;
}
if (movestate === true){
move = "X";
movestate = false;
}
else {
move = "O";
movestate = true;
}
$(this).html(move); //mark square
for (var i = 0; i < winCondition.length; i++) {
if ($(winCondition[i][0]).text() == "") {
continue;
}
if (($(winCondition[i][0])[0].innerText == $(winCondition[i][1])[0].innerText)
&& ($(winCondition[i][0])[0].innerText == $(winCondition[i][2])[0].innerText)) {
// check to see if game is won
alert($(winCondition[i][0])[0].innerText+" wins!");
}
}
});
});
最佳答案
您的代码有几个问题。
（1）.innerText是DOM元素的属性，而不是jquery对象。您可以使用以下内容：
$(winCondition[i][0])[0].innerText
或者更好的是，您可以使用jquery
.text()函数，该函数从元素主体获取文本。$(winCondition[i][0]).text()
（2）即使进行了上述更改，仍然存在问题。当您执行
$(winCondition[i][0])时，有时会匹配多个元素。如果随后调用$(winCondition[i][0]).text()，它将得到组合文本，这不是您想要的。您可以通过使所有选择器同时引用垂直类和水平类来解决此问题。（3）选择器，例如
".top, .l"与您想要的不匹配。该选择器将所有具有“ top”类的元素与所有具有“ l”类的元素进行匹配。您需要".top.l"，它仅匹配两个类的元素。（4）对于以下代码行：
if ($(winCondition[0]).innerText == "") {
winCondition[0]是字符串数组。也许您打算拥有winCondition[i][0]。（5）如果要跳至for循环的下一个迭代，请使用
continue，而不是return。