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＆lt; 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中添加相关课程的按钮， 即：

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