1

我有一个 div 网格，其中类是“框”，并且希望用户能够单击其中两个，然后必须等待两秒钟才能单击另一个。

这是我所得到的...

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

在这里！好吧，我根据你给我的代码为你找到了一个解决方案（这样你就不需要改变太多）。

看看它：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 会继续运行（否则某些网站会因超时而冻结）。此解决方案仅使用您的 var clickNumber 并在该人单击两次以上时阻止单击效果。setTimeout 将在 2 秒后触发 clickNumber 上的重置。

希望能帮助到你

于 2013-02-26T18:50:01.147 回答
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

即使您不需要 clickNumber Count

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

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

保留对“框”集合的引用并在 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 回答