2

三目並べゲームをコーディングしていますが、ユーザーが空の正方形をクリックしているか、すでに塗りつぶされているかを確認するために使用しているコードが機能していません。私が行っている間違いを確認してください。

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 に答える