这是一个使用jQuery的JavaScript井字游戏。我可以把"；调试器"；在winCondition函数之后；winCondition"；在控制台中(".top")，但我无法使此功能正常工作。没有"；调试器"；它返回控制台中的空集("[]")。
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。