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

イベントの変化

1回目のクリックと2回目のクリックにより、イベントを変化させます。
実装は簡単「,(カンマ)」でfunctionを区切ればいいだけです。
[sourcecode language=’javascript’]
$(セレクター).toggle(function(){
$(‘セレクター’)命令1;
},function(){
$(‘セレクター’)命令2;
},function(){
$(‘セレクター’)命令3;
});
[/sourcecode]

サンプルを作成

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

HTMLソース
[sourcecode language=’html’]

クリックして下さい

[/sourcecode]

Javascriptのソース
[sourcecode language=’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”);
});
[/sourcecode]

サンプル

上記ソースのサンプルはこちら。
サンプル

1. Web-Parkのホーム > 
2. Javascript > 
3. toggleでクリック回数に応じてイベントを変化させる