JavaScriptを使用してクリックで色変更後に既に変更された要素を戻す方法

2011/05/27 18:33

このQ&Aのポイント

JavaScriptを使用して、クリックで要素の色を変更する方法について学んでいます。
テーブルのブロックをクリックした時に他のブロックの色を元に戻す方法について知りたいです。
テーブルには100個以上のブロックがある場合、全てのブロックの色を戻すためには効率的な方法があるか教えてください。

クリックで色変更後に既に変更された要素を戻すには

javascriptの勉強をしています。 htmlのテーブルタグで、ブロックが３つあるとします。 ■■■ それぞれのブロックを<div id="00"><div id="01"><div id="02"> として定義しています。 onclick="document.getElementById('00').style.backgroundColor='#ff0000' でクリックしたブロックの色を変更しています。質問したい内容は、「１箇所をクリックした時に、他の２箇所の色を戻す」方法です。以下はサンプルです。 -------------------------------------- <TABLE BORDER="2" bordercolor="#000000"> <TR> <TD bgcolor="#008000"> <div id="00"> <IMG onclick="document.getElementById('00').style.backgroundColor='#ff0000';document.getElementById('01').style.backgroundColor='#008000';document.getElementById('02').style.backgroundColor='#008000';" border="0" src="item/img/00.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="01"> <IMG onclick="document.getElementById('01').style.backgroundColor='#ff0000';" border="0" src="item/img/01.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="02"> <IMG onclick="document.getElementById('02').style.backgroundColor='#ff0000';" border="0" src="item/img/02.png" width="36" height="36"> </div> </TD> </TABLE>--------------------------------------------- １箇所をクリックした時に、他の２箇所の色を戻すには「00をクリックした時に、01の色を戻す02の色を戻す」のように、３箇所全てに記述しなければならないのでしょうか？テーブルのブロックが少なければ、これでもいいのですが、たとえば１００個とか１０００個になった時にはとても大変な作業になってしまいます。他になにか効率のいい記述の仕方はありますでしょうか？ご存知の方いらっしゃいましたら、ご教授よろしくお願いいたします。

16a27
お礼率56% (28/50)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#137826

2011/05/27 19:44 回答No.2

最後にクリックした要素のidをグローバル変数に保存するようにするのはどうでしょう? グローバル変数を使うのは安直ではありますが、複雑なことをしないのであれば以下のような単純な方法が簡便で良いのではないでしょうか。 <head> <title>test</title> <style type="text/css"> div { width: 100px; height: 100px; border: 1px solid #000; } </style> <script type="text/javascript"> var lastid = ""; function fn(e) { if (lastid.length) { document.getElementById(lastid).style.backgroundColor = "#fff"; } e.style.backgroundColor = "#f00"; lastid = e.id; } </script> </head> <body> <div id="00" onclick="fn(this)">00</div> <div id="01" onclick="fn(this)">01</div> <div id="02" onclick="fn(this)">02</div> </body> </html>

質問者

お礼 2011/05/27 20:39

レス頂き感謝します。ご教授してくださった方法で、手を加えましたところ私が希望する通りの動作をしてくれました！当方まだ勉強したてなもので、分かりやすく記述例を作って頂いたことで、とても理解が早まりました。大変嬉しいです。ありがとうございました<(__)>

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

askaaska
ベストアンサー率35% (1455/4149)

2011/05/27 19:41 回答No.1

1000個あるうちの200番目をクリックされたとき 1000個の色を元の色に変えて200番目を改めて色を変えるとやると処理はともかく実装は楽ね。処理を軽くするには現在色が変わっている場所というのを覚えておいてクリックしたらその場所を戻すクリックした場所を変えるという風にするんだわ。

質問者

お礼 2011/05/27 20:48

レス頂き感謝します。 >処理はともかくそうなんですよね。記述なら大量の単純作業ですが、実行したときにやたら重い命令になってしまいます。タグとしても整理できない汚れた感じがしますし・・「色の変わっている場所」のidを変数として格納して格納された場所を直すという方法ですね。アドバイス頂き、ありがとうございました<(__)>

ログインすると、全ての回答が全文表示されます。