x 次后禁用点击

Question

假设用户可以单击按钮 (div) 7 次。单击 7 次后，该按钮必须消失或变得不可单击。我该怎么做？

Answer 1

尽管您需要自己充实一些细节，但这应该可行。按钮：

<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>

我只是停止处理点击，但是您当然可以隐藏该按钮，而不需要太多的努力。

Answer 2

像这样的东西应该有效：

$('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);

});

这样，您可以避免全局变量并使计数与其所属的特定元素相关联。 （想象一下，如果您有数百个这样的按钮！）

Answer 3

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

使用闭包

只需在事件处理程序外部定义变量并在每次单击时增加它。然后检查它有什么价值。它可能如下所示：

// 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');
        };
    });
})();

使用 jQuery.data() 将点击计数器关联到元素

您还可以使用 jQuery 的功能之一将数据附加到元素。它可能看起来像这样：

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

实例

您可以看到两个代码都正常工作 - 只需点击此链接即可观看演示： http:// jsfiddle.net/3wt8h/

jQuery 免责声明 < 1.7

如果您的 jQuery 版本早于 1.7，您将无法使用 .on() 函数。只需使用 .bind() 即可，它的工作原理应该完全相同。

Answer 4

1. 向 div 添加一个 click 处理程序
2. 每次用户单击都会增加全局计数时，
3. 。当 count === 7 时，将 visible css 类设置为隐藏。

Answer 5

简短的答案是增加一个变量作为点击操作的一部分以跟踪按钮被点击的次数。

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

使用 jQuery：

function initClick () {

    var clickCounter = 0;

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

}

initClick();

Answer 6

$(function(){
    $('#myDiv').data('clickCount',0).click(function(){
        $this = $(this);
        var clickCount = Number($this.data('clickCount')) + 1;
        if(clickCount <= 7){
            //Perform click action here
            $this.data('clickCount',clickCount);
        }
        if(clickCount == 7){
            $this.hide();//for example
        }
    });
});

Answer 7

$("div.button").click(function(){
   var count = parseInt($(this).data("clicks_count"));
   if(isNaN(count))
      $(this).data("clicks_count","0");
   else if(count>=6)
      $(this).hide();
   else
      $(this).data("clicks_count",count+1);
});

当然，在你的 html 中添加带有相关类的按钮，
IE：

  <input type="button" class="button" value="Click Me" />

Answer 8

这就是我要做的

http://jsfiddle.net/einar/E9Wkr/

var countclick = 0;

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