jquery - 3回クリックした後にjqueryイベントをトリガーする

Question

<a>ユーザーがタグを 3 回クリックした場合にのみトリガーされる通知を設定しようとしています。

通知を生成するために、fancybox と呼ばれる jQuery ライトボックスを使用しています。

これまでのところ、ファンシーボックスをすべてセットアップしましたが、タグを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 は最初のクリックで起動します。

いつでも3回のクリック後にfancyboxを常に起動したい場合は、@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
    }
});