廃止されたtoggle()の、クロージャーによる代替実装方法

  • 5
    いいね
  • 2
    コメント

いまさらだけど、
jQuery toggle() が1.9以降で廃止されている件について。
クリックされる度にループ的に一定の動作を繰り返すのに便利だっただけどなー、、、
ってことでそれを代替する方法。

もちろん、クリック回数を管理する変数をもって自前で実装すればよいだけなんだが、
そのためだけにローカル変数が増えるとか嫌。
・・・あ、クロージャー使えばよいじゃないか、という話のメモ。

toggle.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.3.min.js'></script>
<script>

  // 実行例
  $(document).ready(function(){

    // 廃止されたtoggle()的な動作を実装したい時は、
    // 即時関数を用いて click() へbindする関数に対して
    // クロージャー変数を用いることで、スコープを閉じた実装が可能。
    (function(){
      var counter = 0;

      $("#id_button").click(function(){
        var target = $(this);

        counter++;
        switch( counter ){
          case 1:
            target.val("トグル1>>2");
            break;

          case 2:
            target.val("トグル2>>3");
            break;

          default:
            counter = 0;

            target.val("トグル3>>0");
            break;
            break;
        }

      });
    }());

  });

</script>
</head>
<body>
<form>
  <input id="id_button" type="button" value="トグル動作"></input>
</form>
</body>
</html>