[ jQuery ]1.9x以降で廃止されたtoggle関数を実装する

以前とある案件でjQueryのバージョンを2.xにしたんですが、クリックで関数をそれぞれ実行するtoggle()が動かない!　よくよく調べるとjQuery1.9以降では廃止された模様。。。常にアンテナは張っておかないとと自戒しつつ、この今は無きtoggle()を復活させたいと思います。

そもそもなぜ廃止されたのかというと、要素の表示／非表示を切り替える.toggle()メソッドと混同することと、モジュール性を高めるためという理由らしいです。

toggle関数を新たに作成する
関数を実行する
jQuery Migrate Pluginでtoggle()を使用できるようにする
おまけ - コードを読み解いてみる

toggle関数を新たに作成する

調べてみると廃止されたtoggle()の、クロージャーによる代替実装方法 | Qiitaという記事があり、コメント欄に良さげなコードがありました。

Javascript

$.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);
　　});
  });
};

コードの内容はわからない点が多いので後述しますが、早速実行してみます。

関数を実行する

用意したコードはクリックするたびに画像を切り替えるものです。廃止されたtoggle()と書き方は同じです。

Javascript

$( '.btn_menu' ).clickToggle(
  function() {
    $( 'img', this ).attr( 'src', 'image1.png' );
  },
  function() {
    $( 'img', this ).attr( 'src', 'image2.png' );
  }
);

jQuery Migrate Pluginでtoggle()を使用できるようにする

記事を書くのに調べた中で知ったのですが、jQuery Migrateというプラグインがあり、これを読み込むことで廃止されたAPIを復元できるようになります。読み込むJQuery本体のバージョンは当然ながら、廃止されたバージョン、1.9以降になります。

HTML

<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery-migrate-1.4.1.js"></script>

おまけ - コードを読み解いてみる

今回のコードですが、力量不足で何をしているのか読み解けない箇所もあったので、いろいろ調べつつ拙いながらも処理内容のコメントをいれました。

Javascript

//関数clickToggleの追加を宣言
$.fn.clickToggle = function(a, b) {

  //関数clickToggleがあれば繰り返し処理
  return this.each(function() {

  //変数clickedを設定
  var clicked = false;

  //clickされた時の処理
  $(this).on('click', function() {

    //クリックされたら、!clicked、つまりclickedの値はブール値なのでtrueになる
  　clicked = !clicked;

  　//clickedの値がtrueなら、つまりクリックされた状態なら、
    if (clicked) {

      //引数a(ここでは関数)を実行し処理を返す
      return a.apply(this, arguments);
    }
      //さらにクリックされたら、引数b(ここでは関数)を実行し処理を返す
      return b.apply(this, arguments);
    });
  });
};

よく解らなかったのがこの箇所、

Javascript