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でクリック回数に応じてイベントを変化させる
Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405
COMMENT PLEASE!!
トラックバック
- 「toggleでクリック回数に応じてイベントを変化させる」のトラックバックURL
Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/javascript/toggle090930.html/trackback