jQueryでボタンの複数回クリックの登録

Question

jQueryでボタンのクリックを押して1回目、２回目、3回目のクリックの動作を登録するコードを教えて欲しいです。4回目以降は反応しないようにしたいです。どうかお願いいたします。

Comments

[miyabi_pudding]

自身で書いてみたソースコードを記載して下さい。

Answer 1

shinji709 さんのHTMLで、以下のような方法も。

配列の破壊的メソッドを活用し、メモリに配慮するタイプ。

1. イベントリスナはコールバック関数なので、配列に格納しておきます。
2. shift() で取り出して順番に実行します。
3. 残りのコールバック関数がなくなると、配列への再格納が必要になります。

let cbLauncher = [
  function ( ev ) {
    $("#fuga").text("1回目");
  },
  function ( ev ) {
    $("#fuga").text("2回目");
  },
  function ( ev ) {
    $("#fuga").text("3回目");
  }
];

$('#hoge').on("click", cbLauncher.launch=function( evt ) {

  // 異なる処理を順番に実行
  let cb = cbLauncher.shift();
  if ( cb && "function" === typeof cb) cb( evt );

  // クリーンナップ
  if ( !cbLauncher.length ) {
    $('#hoge').off("click", cbLauncher.launch);
    cbLauncher = null; // ガベージコレクタが回収してくれるかも（追記
    //$("#fuga").text("unhandled click");
  }

});

ただし、4回目以降は無効化したいとのことなので、完全な クリーンナップ を考慮して、自らイベントリスナを解除します。
（$().on("click", listener) で登録 / $().off("click", listener) で解除）

Comments

[shun_1110]

ご回答大変感謝致します。やってみたところ全く問題なく機能し解決できました。
ありがとうございました。

Answer 2

11/10 06:09現在、質問文にコードが皆無なので以下HTMLを想定します。

<button id="hoge">ボタン</button>
<p id="fuga"></p>

以下のようにクロージャ使って書けば良いと思います。

$('#hoge').click((function() {
  let count = 0
  return function() {
    count++
    if (count < 4) $('#fuga').text(count + '回目')
  }
})())

1回目、２回目、3回目で処理を分けるには、上記コードのif (count < 4) $('#fuga').text(count + '回目')の部分を以下に差し替えて、それぞれの処理を書いて下さい。

    if (count === 1) {
      // 一回目の処理を書く
    } else if (count === 2) {
      // 二回目の処理を書く
    } else if (count === 3) {
      // 三回目の処理を書く
    } else {
      // 四回目以降 (何も書かない)
    }

Comments

[shun_1110]

ご回答大変感謝致します。やってみたところ全く問題なく機能し解決できました。
ありがとうございました。