【问题标题】:not able to check if a square is empty tictactoe game jquery无法检查正方形是否为空 tictactoe 游戏 jquery
【发布时间】:2012-12-22 08:42:52
【问题描述】:

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


    });
};

即使点击已经占据的方块,我也进入处理程序不知道为什么?

【问题讨论】:

    标签: javascript jquery tic-tac-toe


    【解决方案1】:

    我拼凑了一点fiddle 来让这个东西活着。您仅为空元素(选择器: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';
                }
            }
        });
    }
    

    【讨论】:

    • 您不会删除 empty 类。在您的小提琴播放器中,c 始终能够单击所有方块,即使是已经单击的方块。将elm.removeClass('empty'); 添加为if(elm.hasClass('empty')) { 中的最后一行,以确保在单击方块后为locked。见这里:jsfiddle.net/7PSwc/1
    • 是的,我同意 div.empty.length 的说法,但是这个 "$('div.square.empty').click(function()" 有什么问题,谢谢
    • @axel.michel:+1 为工作小提琴。很好,看起来不错。
    【解决方案2】:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多