マウスクリックでテキストを入れ替える

Home>Information>マウスクリックでテキストを入れ替える

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

[JavaScript][jQuery]

テキストをクリックすると他に用意したテキストと差し替えます。

サンプル

ソースコード

HTML

HTML部分では、<div>要素にIDをcm1~3で設定します。
最初のcm1は、表示(display:block)します。
残りのcm2とcm3は、非表示(display:none)にします。
つまり、cm1~3の内容は表示上ではcm1しか見えませんが、HTMLコード上では、最初から3つ記述されている状態です。
これをJavaScriptによって交互に表示を入れ替えています。

JavaScript

JavaScriptでは、jQueryを利用しています。jQueryを使わなくてもできますが、ソースがすっきりすることと、jQueryの練習を兼ねて使っています。

jQueryの読み込み

このスクリプトはjQueryを使っていますので、まずjQueryを読み込みます。
jQueryは、「jQuery」(英語)からダウンロードできます。

ダウンロードしたら、<head>要素内で、以下の記述をします。
この際、jqueryのファイル名にバージョンナンバーがふられていますが、それらを削除して「jquery.js」としてしまいましょう。

<script type="text/javascript" src="jquery.js"></script>

ページを読込まれたときに実行する

$(function(){ ~ });

この「~」の間に書かれたスクリプトは、ページを読込まれると同時に実行されます。

特定のクラス名をクリックしたときに実行する

$(".change").click(function(){ ~ });

ここでは、.changeというクラス名を適用してある要素をクリックすると、「~」の間のスクリプトを実行します。
上記のHTMLでは、cm1~3のp要素にそれぞれclass="change"を設定していますので、各テキストをクリックしたときにイベントが実行されます。

ループ処理~表示するcmの番号を決める

for( i=1; i<4; i++){ ~ }

ループ処理です。
iを1から数えて、4未満(つまり3)をカウントするまで「~」の処理を実行します。
i++は、iに1を加算するときの省略した書き方です。i=i+1と同じことです。
iに代入されている数値は、cm1~3の番号に該当します。

if( i == 3 ){ j = 1; } else { j = $i + 1; }

条件分岐処理です。
iは存在しているcmの総数、$jは現在表示しているcmの番号です。
cm1から順にクリックするとcm3まで表示し、cm3のときにクリックすると、再度cm1に戻るようにします。

cmの表示・非表示を切り替える

if( $( "#cm" + i ).css( "display" ) != "none" ) { ~ }

cmのID番号でループさせて、cm1~cm3のdisplayプロパティをチェックしています。
displayプロパティが非表示(none)でなければ、「~」の処理を実行します。

$( "#cm" + i ).hide();
$( "#cm" + j ).show();

hide()で要素を隠し、show()で要素を表示します。
iの値のcmが表示されていれば消し、その次のcm(jが値のcm)を表示します。

ループ処理を途中で抜ける

break;

表示の切り替え処理を行ったら、ループ処理を中断して終了します。
ループ処理を途中で抜けるには、breakを記述します。

関連リンク

よく読まれている記事

UpDate:2009-11-5