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"); });
サンプル
上記ソースのサンプルはこちら。
サンプル
- Web-Parkのホーム >
- Javascript >
- toggleでクリック回数に応じてイベントを変化させる
COMMENT PLEASE!!
トラックバック
- 「toggleでクリック回数に応じてイベントを変化させる」のトラックバックURL
- http://web-park.org/javascript/toggle090930.html/trackback