0

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

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

.click()セレクターに一致するすべての要素に、呼び出し時にイベントハンドラーをアタッチします。後で要素がセレクターと一致しなくても、イベントハンドラーはそこにあります。

代わりに、を使用.on()して、トリガーされた時点でセレクターがイベントハンドラーに引き続き適用されるかどうかを確認します。

$(document).on("click", "div.square.empty", function(){ alert("Clicked an empty square!"); });
于 2012-12-22T09:28:55.917 に答える
0

問題は、.click(..)関数を呼び出すときにセレクターに一致する要素に対してのみイベントハンドラーをバインドすることです。ただし、すべての要素にバインドする必要がありますが、要素に正しいクラスがある場合にのみ関数をトリガーします。

これは、デリゲートを使用して行うことができます。最近のjQueryバージョンでは、次の.on()方法を使用してこれを行います。

$('div.square').on('click', '.empty', function() {
    // your code here
});
于 2012-12-22T11:37:16.120 に答える