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
https://web-park.org/javascript/toggle090930.html/trackback