Jquery 禁用x次后的单击

假设用户能够单击按钮（div）7次。点击7次后，按钮必须消失或不可点击。我该怎么做

将

单击
处理程序添加到div

每次用户单击时，都会增加一个全局计数

当计数===7时，将

visible

css类设置为hidden

---

像这样的方法应该会奏效：

$('button').data('count', 0).on('click', function (e) {
    var $t = $(this),
        count = ++($t.data('count'));

    // kill it with fire
    if (count === 7) {
        $t.remove();
    }

    // increment the count
    $t.data('count',count);

});

---

这样，就避免了全局变量，并将计数与它所属的特定元素关联起来。（想象一下，如果你有数百个这样的按钮！）

这应该可以工作，尽管你需要自己充实一些细节。按钮：

<div class="button">button</div>

按钮

JS：

<script>
$('div.button').click(function() {
  var tally = ($(this).data('clicks') || 0) + 1;
  if ( tally < 7 ) {
    $(this).data('clicks', tally);
    console.log(tally);
  }
});
</script>

$（'div.button'）。单击（函数（）{
var Tall=（$（this）.data（'clicks'）| | 0）+1；
如果（计数<7）{
$（此）.data（'点击'，计数）；
控制台日志（理货）；
}
});

---

我只是停止了对单击的处理，但是您当然可以隐藏按钮，而无需付出太多的努力。

简单的答案是在单击操作中增加一个变量，以跟踪按钮被单击的次数

您应该避免将此变量设置为全局变量。您可以通过在函数范围内声明变量来实现这一点，并让该函数设置单击行为

使用jQuery：

function initClick () {

    var clickCounter = 0;

    jQuery('#myLink').click(function (e) {
        if (clickCounter >= 7) {
            return;
        }
        // do stuff
        clickCounter++;
    });

}

initClick();

$（函数（）{
$（'#myDiv'）。数据（'clickCount'，0）。单击（函数（）{
$this=$（this）；
var clickCount=Number（$this.data（'clickCount'））+1；
如果（单击计数）
当然，在html中添加带有相关类的按钮，
i、 e:

至少有两种方法可以做到这一点

使用闭包
只需在事件处理程序外部定义变量，并在每次单击时增加它。然后只需检查它的值。它可能如下所示：

// method 1 - using closure
(function(){
    var click_counter = 0;
    jQuery('#link1').on('click', function(event){
        event.preventDefault();
        var el = jQuery(this);
        click_counter += 1;
        if (!el.hasClass('inactive')){
            // should be activated
            alert('Clicked the link ' + click_counter + ' time(s)');
        };
        if (click_counter >= 7){
            // deactivate
            el.addClass('inactive');
        };
    });
})();

// method 2 - using jQuery.data()
jQuery('#link2').on('click', function(event){
    event.preventDefault();
    var el = jQuery(this);
    var click_counter = (el.data('click-counter') || 0) + 1;
    console.log(click_counter);
    el.data('click-counter', click_counter);
    if (!el.hasClass('inactive')){
        // should be activated
        alert('Clicked the link ' + click_counter + ' time(s)');
    };
    if (click_counter >= 7){
        // deactivate
        el.addClass('inactive');
    };
});

使用
jQuery.data（）
您还可以使用jQuery的一个功能将数据附加到元素中。它可以如下所示：

// method 1 - using closure
(function(){
    var click_counter = 0;
    jQuery('#link1').on('click', function(event){
        event.preventDefault();
        var el = jQuery(this);
        click_counter += 1;
        if (!el.hasClass('inactive')){
            // should be activated
            alert('Clicked the link ' + click_counter + ' time(s)');
        };
        if (click_counter >= 7){
            // deactivate
            el.addClass('inactive');
        };
    });
})();

// method 2 - using jQuery.data()
jQuery('#link2').on('click', function(event){
    event.preventDefault();
    var el = jQuery(this);
    var click_counter = (el.data('click-counter') || 0) + 1;
    console.log(click_counter);
    el.data('click-counter', click_counter);
    if (!el.hasClass('inactive')){
        // should be activated
        alert('Clicked the link ' + click_counter + ' time(s)');
    };
    if (click_counter >= 7){
        // deactivate
        el.addClass('inactive');
    };
});

实例
您可以看到这两个代码都正常工作-只需按照此链接进入演示：

jQuery<1.7的免责声明
如果您的jQuery版本早于1.7，您将没有可用的
.on（）
函数。只需使用
.bind（）
，它的工作原理应该完全相同。
这就是我要做的


我曾经发布过一个
.nth（）
函数，它类似于
one（）
，但用于
n
点击。当我尝试这段代码时，我得到了未捕获的引用错误：在“count=+$t.data（'count'）；”的前缀操作中，左侧表达式无效。计数在哪里增加？我缺少一行“$t.data”（'clicks'，newCount）；'code@Olle~woops！很抱歉！：D更新了代码以增加计数。@Blender~现在这是个好主意。：D
// method 2 - using jQuery.data()
jQuery('#link2').on('click', function(event){
    event.preventDefault();
    var el = jQuery(this);
    var click_counter = (el.data('click-counter') || 0) + 1;
    console.log(click_counter);
    el.data('click-counter', click_counter);
    if (!el.hasClass('inactive')){
        // should be activated
        alert('Clicked the link ' + click_counter + ' time(s)');
    };
    if (click_counter >= 7){
        // deactivate
        el.addClass('inactive');
    };
});

var countclick = 0;

$(".button").on("click", function() {
    countclick = countclick + 1;
    if (countclick >= 7) {$(".button").off("click"); } 
});