1

クラスが「ボックス」であるdivのグリッドがあり、ユーザーがそのうちの2つをクリックできるようにし、2秒待ってから別の1つをクリックできるようにします。

これは私が得た限りです...

var clickNumber = 0;

$(".box").click(function () {
    $(this).removeClass('red').addClass('blue');
    switch (clickNumber){
        case 0:
            clickNumber++;
            break;
        case 1:
            setTimeout(function() {
                //disable click for class "box"
        }, 2000);
            clickNumber = 0;
            break;
    }
});

より完全な例...

http://jsfiddle.net/wZP6J/

ありがとうございました！

4

9 に答える 9

3

次のように、変数を使用してクリックを許可する必要があるかどうかを追跡します。

var clickNumber = 0,
    clicksAllowed = true;

$(".box").click(function () {
    if(clicksAllowed){
        $(this).removeClass('red').addClass('blue');
        switch (clickNumber){
            case 0:
                clickNumber++;
                break;
            case 1:
                clicksAllowed = false;
                setTimeout(function() {
                    //disable click for class "box"
                    clicksAllowed = true;
                }, 2000);
                clickNumber = 0;
                break;
        }
    }
});

これが更新されたフィドルです。

于 2013-02-26T18:32:58.847 に答える
3

このフィドルを参照してください。

UNIXエポックタイムスタンプを保存し、それを最後のタイムスタンプと比較するだけです。2秒以上経過している場合は、必要なことをすべて実行してください。タイムアウトを設定する必要はありません。

;(function() {
    var clickNumber = 0;
    var lastClickTime = 0;

    $(".box").click(function () {
        var seconds = new Date().getTime() / 1000;

        if ((seconds - lastClickTime) > 2) {
            $(this).removeClass('red').addClass('blue');
            clickNumber++;
            lastClickTime = seconds;
        }
    });
})();

また、クロージャを使用して、関連する変数が汚染されないようにグローバルスコープから除外していることに注意してください。

于 2013-02-26T18:35:00.927 に答える
0

「ボックス」のコレクションの参照を保持し、switchステートメントでそれらを有効/無効にします。

var clickNumber = 0;
var boxes = $('.box');

boxes.click(function () {

    if (clickNumber == 1)
    {
        return; // just in case ;)
    }

    $(this).removeClass('red').addClass('blue');

    switch (clickNumber){
        case 0:
            clickNumber++;
            break;
        case 1:
            // disable boxes
            boxes.prop('disabled', 'disabled');

            setTimeout(function() {
                //enabled boxes after 2 seconds
                boxes.prop('disabled', '');
                clickNumber = 0;
            }, 2000);

            break;
    }
});
于 2013-02-26T18:37:20.927 に答える
0

動作するJsFiddleとしてコードを更新します。

var clickNumber = 0;    
$(".box").click(function () {    
    switch (clickNumber) {
        case 0:
            $(this).removeClass('red').addClass('blue');
            clickNumber++;
            break;
        case 1:
            setTimeout(function () {
                clickNumber = 0;
            }, 2000);
            clickNumber++;
            break;

    }
});
于 2013-02-26T18:37:48.597 に答える
0

そこに行きます...

var clickNumber = 0;

$(".box").on('click', boxClick);

function boxClick() {
    clickNumber += 1;
    $(this).removeClass('red').addClass('blue');
    if(clickNumber == 2) {
        $(".box").off();
        setTimeout(function() {
            $('.box').on('click', boxClick);
            clickNumber = 0;
        },2000);
    }
}

フィドル： http： //jsfiddle.net/wZP6J/2/

于 2013-02-26T18:37:59.083 に答える
0

これを試してください：ライブデモ

var clickNumber = 0;

function disableClick() {
    // Disable click event for now
    $(".box").unbind('click');

    // Turn on click after timeout
    setTimeout(enableClick, 2000);
}

function enableClick() {
    $(".box").click(function () {
        $(this).removeClass('red').addClass('blue');
        switch (clickNumber) {
            case 0:
                clickNumber++;
                break;
            case 1:
                disableClick();
                clickNumber = 0;
                break;
        }
    });
}

enableClick();
于 2013-02-26T18:40:22.107 に答える
0

LIVE DEMO

function clicking(){
     $(this).removeClass('red').addClass('blue');
     $(".box").off('click', clicking);
     setTimeout(function(){
        $(".box").on('click',clicking);
     },2000);
}

$(".box").on('click', clicking);
于 2013-02-26T18:42:54.953 に答える
0

クリック数をカウントする必要はありません

var f1 = function(){
  $(this).removeClass('red').addClass('blue');
   $(".box").unbind('click');
            setTimeout(function() {
                 $(".box").click(f1);
            }, 2000);
}
$(".box").click(f1);

http://jsfiddle.net/wZP6J/6/

于 2013-02-26T18:45:59.550 に答える
0

私はそこにいます！さて、私はあなたが私にくれたコードに基づいてあなたのための解決策を手に入れました（そうすればあなたはあまり変更する必要はありません）。

それを見てください：http：//jsfiddle.net/NAGKk/

var clickNumber = 0;
$(".box").click(function () {
if(clickNumber<2)
    $(this).removeClass('red').addClass('blue');
    switch (clickNumber){
        case 0:
            clickNumber++;
            break;
        case 1:
            clickNumber++;
            setTimeout(function() {
                clickNumber = 0;
            }, 2000);
            break;
    }
});

setTimeoutの主な考え方は、しばらくすると内部に何かをトリガーすることです（これはすでに知っています）が、JavaScriptが実行され続けることを覚えておく必要があります（そうしないと、一部のWebサイトがタイムアウトでフリーズします）。このソリューションは、var clickNumberを使用するだけで、ユーザーが2回以上クリックした場合のクリック効果をブロックします。setTimeoutは、2秒後にclickNumberのリセットをトリガーします。

それが役に立てば幸い

于 2013-02-26T18:50:01.147 に答える