Question

如何使按钮在指定的次数内可点击，我可以在代码中编写脚本，假设我有以下jquery

$('h3').on('click', function(){
    $('#test').css('width','+=10px');
});

但它可以随时点击。现在我想做一次或两次点击。我怎么能这样做？

我已经演示了css width + =的示例，但实际上我想为
做
点击我定义的时间==

修改

下一个问题：好的，现在我有两个按钮，一个是h3，另一个是h4。

单击h4然后重置h3的时间，单击h3时重置h4的时间

Answer 1

$('h3').data('clickable',2).on('click.h3', function(){
    this.clicks = !this.clicks?0:this.clicks++;
    if(this.clicks < $(this).data('clickable'))
        $('#test').css('width','+=10px');
    else $(this).off('click.h3');
});

Answer 2

var cnt = 0;
$('h3').on('click', function () {
    if (cnt != 2) {
        $('#test').css('width', '+=10px');
        cnt++;
    }
});

或者如果您希望它只能点击一次就可以使用.one（）

$('h3').one('click', function () {
        $('#test').css('width', '+=10px');
});

<强>更新

var h3cnt = 0;
var h4cnt = 0;
$('h3').on('click', function () {
    if (h3cnt != 2) {
        $('#test').css('width', '+=10px');
        h3cnt++;
    }
    h4cnt =0;
});
$('h4').on('click', function () {
    if (h4cnt != 2) {
        $('#test').css('width', '-=10px');
        h4cnt++;
    }
    h3cnt =0;
});

DEMO

Answer 3

这将在5次点击后停止点击事件...

var count = 5;

$('h3').on('click', function(){
    count--;
    if (count == 0) return;
    $('#test').css('width','+=10px');
});

只需更改count即可。

Answer 4

尝试：

(function() {
    var countA = 3,  // number of clicks that the h3 will work for
        countB = 5;  // number of clicks that the h4 will work for

    $('h3').on('click', function(){

        countB = 5;  // reset count for h4

        if (!countA) {return;}
        countA--;

        // do stuff

    });

    $('h4').on('click', function(){

        countA = 3;  // reset count for h3

        if (!countB) {return;}
        countB--;

        // do stuff

    });



})();

Answer 5

使用以下代码：

$('h3').attr('data-count', 1).on(
    'click',
    function()
    {
        var count = $(this).attr('data-count');
        var maxClicks = 5;

        count = parseInt(count, 10);

        if(count >= maxClicks)
        {
            return
        }

        $('#test').css('width','+=10px');
        $(this).attr('data-count', count + 1);
    }
);

这里也是一个例子：

http://jsfiddle.net/merianos/sPKVr/

这是你的代码更新：

http://jsfiddle.net/merianos/syZ78/2/

Answer 6

每次按下按钮时，您都可以获取计数变量和增量计数，当计数达到指定数量时，禁用按钮，简单

使可点击按钮指定的次数

6 个答案: