この記事は jQuery Advent Calendar 2014 の ９日目の内容です。
何を書こうか悩んだのですが、軽めに。
jQueryのバージョン1.9より前にあった event の toggle、地味に時折あると、簡易的にイベントを繰り返し実行したいような時に便利だったりします。
.toggle() | jQuery API Documentation
.show() と .hide() を繰り返す方の .toggle() ではないことに注意。
このイベントの `.toggle()` だけをプラグイン的に使えるように抜き出してみよと思います。
イベントの .toggle() のみを抜き出す。
過去のコードを参考に、該当部分を抜き出してみました。 .toggle() だとアニメーションの .toggle() と紛らわしいので、こちらはイベントハンドリングのほうだよというのを少しわかりやすくするために、 .eventToggle() としてみています。
.toggle()の再現コード
(function ($) {
$.fn.eventToggle = function( fn ) {
// Save reference to arguments for access in closure
var args = arguments,
guid = fn.guid || jQuery.guid++,
i = 0,
toggler = function( event ) {
// Figure out which function to execute
var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
// Make sure that clicks stop
event.preventDefault();
// and execute the function
return args[ lastToggle ].apply( this, arguments ) || false;
};
// link all the functions, so any of them can unbind this click handler
toggler.guid = guid;
while ( i < args.length ) {
args[ i++ ].guid = guid;
}
return this.click( toggler );
};
})(jQuery);これがプラグインとなる部分。
これが動くか簡易なデモを作ってみました。クリックすると、ボタン横のテキストが順にかわります。
デモ用コード
var $textElem = $('.demo__text');
$('.demo__button').eventToggle(
function () { $textElem.text('クリック１回目'); },
function () { $textElem.text('クリック２回目'); },
function () { $textElem.text('(´ ºムº `)'); }
);実行デモ
ここのテキストがかわります
これで、イベントの '.toggle()' と同じ機能が利用できるようになります。
Migrate Plugin でも可能
今回のコード、Migrate Plugin でも使われているコードなので、これの利用でも使うことができます。でも、他の機能は不要なので、多少コードを軽くするという目的で抜き出して使ってみることにしました。
簡易的にハンドリングできるようにしたらいいといえばいいのですが、ちょっとした簡易な構成のページで利用するときなどには便利なので、今後も機会があれば利用しようかなと思います。
以上、かなり軽めな内容となってしまいましたが、このへんで。
