Question

为了试图了解我的jQuery，我试图制作一个功能性的tic-tac-toe游戏。我很早就设法遇到了问题。

这是一个jsFiddle（您可能需要更改宽度才能获得正确的电路板布局）：

http://jsfiddle.net/isherwood/xcg22twj/1/

这是我的jQuery代码：

$(document).ready(function () {
    var board = $('.board');
    subtitle = $('.subtitle');
    gamespace = $('.gamespace');
    a1 = $('.a1');
    a2 = $('.a2');
    a3 = $('.a3');
    b1 = $('.b1');
    b2 = $('.b2');
    b3 = $('.b3');
    c1 = $('.c1');
    c2 = $('.c2');
    c3 = $('.c3');
    piece = $('.piece');
    pieceX = $('.pieceX');
    pieceO = $('.pieceO');
    player1select = true;
    player2select = false;
    player1piece = "";
    player2piece = "";
    gameOver = true;

    if (gameOver == true) {
        $(board).css('display', 'none');

        $(pieceX).click(function () {
            player1piece = "x";
            player2piece = "o";
            $(pieceX).css('display', 'none');
            $(pieceO).css('display', 'none');
            subtitle.html('Player 1 = X | Player 2 = O');
            $(board).css('display', 'inline');
        })

        $(pieceO).click(function () {
            player1piece = "o";
            player2piece = "x";
            $(pieceX).css('display', 'none');
            $(pieceO).css('display', 'none');
            subtitle.html('Player 1 = O | Player 2 = X');
            $(board).css('display', 'inline');
        })

        if (player1piece.length > 0 && player2piece.length > 0) {
            gameOver = false;
        }
    } else {
        $(gamespace).hover(

        function () {
            $(this).css('background-color', 'tomato');
        }, function () {
            $(this).css('background-color', 'white');
        });
    }
});

基本上，我的问题是我希望gameOver变量为false，直到玩家一选择X或O.选择后，棋子消失，棋盘出现，gameOver设置为false，游戏开始。但是，检查gameOver是true还是false的if / else语句似乎并没有正常工作。如果它正在工作，我将能够悬停在每个空间上，它将变为番茄。

任何人都可以解释为什么它不能这样工作吗？

谢谢。

Answer 1

这里有几个问题，其中一些问题在上面的评论中提到过。最有问题的可能是您需要在某些事件上调用if语句。它应该在您定义的单击函数内部。

为什么我的jQuery if / else语句不起作用？

1 个答案: