Отключить клик через х раз

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 </h2> Если ваша версия jQuery старше 1.7, у вас не будет доступной функции .on().Просто используйте .bind() вместо этого, он должен работать точно так же.

Answer 4

Это то, что я бы сделал

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

var countclick = 0;

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

Answer 5

$("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 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

Краткий ответ: увеличить переменную как часть действия щелчка , чтобы отслеживать количество нажатий кнопки.

Вы должны избегать того, чтобы эта переменная была глобальной. Вы можете сделать это, объявив переменную в области действия функции, и эта функция настроит поведение щелчка.

С помощью jQuery:

function initClick () {

    var clickCounter = 0;

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

}

initClick();

Answer 8

1. добавить обработчик click в div
2. каждый раз, когда пользователь нажимает, увеличивает глобальный счет.
3. когда счет === 7, установите класс visible css на скрытый.