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

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