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

Question

我试图设置一个通知，只有当用户单击<a>标记3次才会触发。

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

到目前为止，我已经有了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

您可以创建一个点击侦听器，并保存点击时更新的变量。

是这样的：

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

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

@ adeneo的答案是正确的如果你想要的功能第一次只有。有了这些代码，如果关闭fancybox，然后再次点击链接ONCE，fancybox会在第一次点击时触发。

如果你想要的是的fancybox后任何时间的3次点击ALWAYS射击，然后调整@ adeneo的代码是这样的：

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

见forked JSFIDDLE