2

我正在编写一个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();
        }


    });
};

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

4

2 回答 2

1

我拼凑了一个小小提琴来让这个东西活着。您仅为空元素（选择器：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';
            }
        }
    });
}
于 2012-12-22T09:18:51.370 回答
0

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

if($.trim($("handler").text()) == '') //Then it is obviously empty.
于 2012-12-22T09:29:53.573 回答