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

Javascript

2009.10.01

以前に紹介した、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");
});

サンプル

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

  1. Web-Parkのホーム > 
  2. Javascript > 
  3. 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
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook