点击<a> 3次后触发jquery事件答案

【问题标题】：trigger jquery event after clicking <a> 3 times点击<a> 3次后触发jquery事件
【发布时间】：2013-04-07 14:51:29
【问题描述】：

我正在尝试设置一个通知，该通知只有在用户点击 <a> 标签 3 次时才会触发。

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

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

任何想法我会如何做到这一点？

我用来调用灯箱的js是：

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

我已经设置了一个jsFiddle to illustrate它。

【问题讨论】：

它在第一次点击时触发.. :O
是的，我希望它在第三次点击时触发

标签： jquery fancybox

【解决方案1】：

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

var clicked = 0;

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

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

FIDDLE

【讨论】：

这只适用于第一次。之后，fancybox 总是会在第一次点击时触发。我在调整你的代码的地方添加了一个答案。

【解决方案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();
});

见forked JSFIDDLE

【讨论】：

【解决方案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() 的优势在于计数与链接本身相关联，因此如果您碰巧有多个链接来跟踪，则无需尝试跟踪哪些外部计数器属于哪些链接。

【讨论】：

这只适用于第一次。之后，fancybox 将始终在第一次点击时触发。
这是一个足够简单的调整（只需使用%） - 从问题中不清楚它是每一次 第三次点击。

【解决方案4】：

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

类似这样的：

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

【讨论】：