jquery - 点击3次后触发jquery事件

Question

<a>我正在尝试设置仅在用户单击标签 3 次时才会触发的通知。

为了生成通知，我使用了一个名为 fancybox 的 jQuery 灯箱。

到目前为止，我已经完成了 fancybox 的所有设置，但我不确定如何仅在单击 a 标签 3 次后触发它。

有什么想法我会怎么做？

我用来调用灯箱的js是：

 $(document).ready(function() {
        $('.fancybox').fancybox();
    });

我已经设置了一个jsFiddle 来说明它。

Answer 1

只需跟踪元素被点击的次数：

var clicked = 0;

$('.fancybox').on('click', function (e) {
    clicked++;

    if (clicked >= 3) {
        clicked = 0;
        $('.fancybox').fancybox();
    } else {
        e.preventDefault();
    }
});

小提琴

Answer 2

@adeneo 的答案是正确的，如果您只需要第一次使用该功能。使用该代码，如果您关闭fancybox，然后再次单击链接一次，fancybox 将在第一次单击时触发。

如果您想要的是 fancybox 总是在 3 次点击后随时触发，然后以这种方式调整 @adeneo 的代码：

$(document).ready(function () {
    var clicked = 0;
    $('.fancybox').on('click', function (e) {
        clicked++;
        if (clicked >= 3) {
            clicked = 0;
        } else {
            return false;
        }
    }).fancybox();
});

请参阅分叉的 JSFIDDLE

Answer 3

您可以.data()用来跟踪：

$(document).ready(function() {
     $('.fancybox').click(function(e) {
        e.preventDefault();
        var $this = $(this),
            count = ($this.data('click-count') || 0) + 1;
         if (count === 3) {
             $('.fancybox').fancybox();
         }
         $this.data('click-count', count);
     });         
});

演示：http: //jsfiddle.net/XWHga/3/

使用的优点.data()是计数与链接本身相关，因此，如果您碰巧有多个链接来跟踪，那么尝试跟踪哪些外部计数器属于哪些链接就不会很麻烦。

Answer 4

您可以创建一个单击侦听器并保留一个在单击时更新的变量。

像这样的东西：

var clickCounter = 0;
object.addEventListener('click', function() {
    clickCounter++;
    if (clickCounter == 3) {
        //Open it
    }
});