jquery - 制作指定次数的可点击按钮

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;
});

演示

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

您可以在每次按下按钮时获取一个计数变量并增加计数，当计数达到指定数字时禁用按钮，简单