javascript - 无法检查一个正方形是否为空 tictactoe 游戏 jquery

Question

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

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();
        }


    });
};

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

Answer 1

我整理了一下fiddle让这东西活着。你只为空元素捕获事件(选择器:div.square.empty)，这样你只会找到空元素，你不能对里面的 .empty 长度进行测试，因为这个函数只对空元素使用react。无论如何，我像这样修改了你的功能:

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';
            }
        }
    });
}