toggleでクリック回数に応じてイベントを変化させる

以前に紹介した、toggleによる開閉ですが、他にも用途がありました！

イベントの変化

1回目のクリックと2回目のクリックにより、イベントを変化させます。
実装は簡単「,(カンマ)」でfunctionを区切ればいいだけです。

$(セレクター).toggle(function(){
	$('セレクター')命令1;
},function(){
	$('セレクター')命令2;
},function(){
	$('セレクター')命令3;
});

サンプルを作成

これにイベントを当てはめてみました。

HTMLソース

<p style="padding: 1em;"><a href="../img/002.jpg">クリックして下さい</a></p>
<p><img src="../img/001.jpg" alt="001" /></p>

Javascriptのソース

$('p a').toggle(function(){
	$('p img').attr("src",$(this).attr("href"));
	$(this).text('もう一度クリック');
},function(){
	$('p img').attr("src","../img/003.jpg");
	$(this).text('最後にもう一度クリック');
},function(){
	$('p img').fadeOut("slow");
	$(this).css("display","none");
});