Javascript 当我使用调试器停止Jquery函数时，它就工作了，但在其他情况下就不工作了_Javascript_Jquery_Html

Javascript 当我使用调试器停止Jquery函数时，它就工作了，但在其他情况下就不工作了

javascript jquery html

Javascript 当我使用调试器停止Jquery函数时，它就工作了，但在其他情况下就不工作了,javascript,jquery,html,Javascript,Jquery,Html,这是一个使用jQuery的JavaScript的tic-tac-toe游戏。我可以在winCondition函数之后添加“debugger”，并在控制台（“.top”）中为“winCondition”获取适当的值，但我无法使该函数正常工作。如果没有“调试器”，它将返回控制台中的空集（[]） jQuery： $(document).ready(function () { var move = "X", movestate = true,

这是一个使用jQuery的JavaScript的tic-tac-toe游戏。我可以在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!");
            }
        }
    });
});

$（文档）.ready（函数（）{
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”）。单击（函数（）{//标记正方形
if（$（this.html（）！=“”）{//if square不是空的
返回；
}
if（movestate==true）{
move=“X”；
movestate=false；
}
否则{
move=“O”；
movestate=true；
}
$（this.html（move）；//标记正方形
对于（var i=0；i


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>


连续三个




$（文档）.ready（函数（）{
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”）。单击（函数（）{//标记正方形
if（$（this.html（）！=“”）{//if square不是空的
返回；
}
if（movestate==true）{
move=“X”；
movestate=false；
}
否则{
move=“O”；
movestate=true；
}
$（this.html（move）；//标记正方形
对于（变量i=0；i
您的代码有几个问题
（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
，您有三个。长度
，但未定义三个。啊，抱歉。我曾经有>three=winCondition[I]，但我认为变量越少越好。我会编辑它。谢谢。先生，您是位绅士和学者。你提出的解决方案非常有效，我向你顶礼膜拜。我感谢你透彻而易懂的解释。让选择器引用垂直和水平类是我很久以前就应该做的事情。@Jester-我希望你不介意，但这似乎是一个有趣的项目，所以。如果你看一下代码，赢家条件选择器和检查赢家的逻辑可能比你拥有的更简单。这很好。我在努力寻找最有效的方法来检查胜利，然后我决定选择一条路，让它发挥作用。我绝对不介意。事实上，我很欣赏这个教训。再次感谢！
$(winCondition[i][0]).text()

if ($(winCondition[0]).innerText  == "") {