jQuery clickするごとに交互に処理を行う関数を作ってしまう

jQueryで’click()’というと、クリックしたときのイベント処理を行うメソッド。

例えば以下のように使います

<script>
    $('button').on('click', function() {
        alert('クリックしたぞ');
    })
</script>

しかし、これだけでは「クリックするごとに交互に処理を行う」というときに、若干めんどくさい。アコーディオンとかね。

slideToggleとかtoggleClassでなんとかなるレベルの処理ならいいけど、それ以上のこと、例えばテキストを変えたりしなきゃいけないとき、よく紹介されているのは、なんかflagをfalseにしといて、１回クリックされたらflagをtrueにして、もしflagがtrueだったときはこっちの処理を…とかもうややこしいので、もっとシンプルにやりたい。そうだ、どうせなら関数を作ってしまおうよ。

関数を作る

こんな感じで関数を作りましょう

$.fn.clickToggle = function (a, b) {
  return this.each(function () {
    var clicked = false;
    $(this).on('click', function () {
      clicked = !clicked;
      if (clicked) {
        return a.apply(this, arguments);
      }
      return b.apply(this, arguments);
    });
  });
};

これで、’clickToggle()‘という関数が使えるようになりました！関数は一度作ってしまえばどこでも使えます。

使う

使うときは以下のように使います

$('button').clickToggle(function () {
  // １回目のクリック
  $(this).next('.target').slideDown(300);
  $(this).text('閉じる');
}, function () {
  // ２回目のクリック
  $(this).next('.target').slideUp(300);
  $(this).text('開く');
});

だいぶすっきり書けますね！’hover’とだいたい同じような書き方になる。

昔は’toggle()’という超便利な関数があったんですが、jQuery2以上から使えなくなりました。今でも普通に紹介されている記事いっぱいありますが、使えません。気をつけましょう

現場からは以上です。

jQuery最高の教科書

Amazonで見る