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

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

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

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

$.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('開く');
});