Question

我正在编写一个tictactoe游戏，但是我用来检查用户是否点击空方块或已填充的代码对我不起作用请看我正在做什么错误

function startgame(){
    var $board=$('#board');
    $('div.square').remove();

    for(var i=0;i<9;i++)
    $board.append($('<div/>').addClass('square').addClass('empty'));
    $('div.square.empty').click(function(){
        $this=$(this);

        if($('div.square.empty').length==0){

            displayendmsg();
        }
        else {
            $this.removeClass('empty');

            if(currentplayer=="X")
                $this.append($('<div><img src="cross.jpg">       </div>').addClass('cross').css('visibility','visible'));
            else
                $this.append($('<div><img src="circle.jpg">  </div>').addClass('circle').css('visibility','visible'));

            flipturn();
        }


    });
};

即使点击已占用的广场，我也会进入处理程序，不知道为什么？

Answer 1

我整理了一点fiddle来让这件事活着。你只为空元素捕获事件（selector：div.square.empty），这样你只能找到空的元素，你不能在内部测试.empty长度，因为这个函数只对空元素做出反应。无论如何我修改了你的功能：

function startgame(){
    var $board=$('#board');
    $('div.square').remove();
    for(var i=0;i<9;i++) {
        $board.append($('<div/>').addClass('square empty'));
    }
    $board.on('click','.square',function() {
        var elm = $(this);
        if(elm.hasClass('empty')) {
            elm.removeClass('empty');
            if(player === 'x') {
               elm.addClass('x');
               player = 'c';
            } else {
               elm.addClass('c'); 
               player = 'x';
            }
        }
    });
}

Answer 2

或者，您可以检查该字段是否包含文本。

if($.trim($("handler").text()) == '') //Then it is obviously empty.

无法检查方块是否为空tictactoe游戏jquery

2 个答案: