Question

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

要生成通知，我正在使用名为fancybox的jQuery灯箱。

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

我有什么想法会这样做？

我用来调用灯箱的js是：

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

我已经设置了jsFiddle to illustrate。

Answer 1

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

var clicked = 0;

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

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

FIDDLE

Answer 2

@ adeneo的回答是正确的如果您希望该功能仅限第一次。使用该代码，如果您关闭fancybox然后再次单击链接ONCE，则会在第一次单击时触发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

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

单击<a> 3 times</a>后触发jquery事件

4 个答案: