イベントの .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('クリック1回目'); },
function () { $textElem.text('クリック2回目'); },
function () { $textElem.text('(´ ºムº `)'); }
);
実行デモ
ここのテキストがかわります
これで、イベントの '.toggle()' と同じ機能が利用できるようになります。
Migrate Plugin でも可能
今回のコード、Migrate Plugin でも使われているコードなので、これの利用でも使うことができます。でも、他の機能は不要なので、多少コードを軽くするという目的で抜き出して使ってみることにしました。
簡易的にハンドリングできるようにしたらいいといえばいいのですが、ちょっとした簡易な構成のページで利用するときなどには便利なので、今後も機会があれば利用しようかなと思います。
以上、かなり軽めな内容となってしまいましたが、このへんで。