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

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

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

解決済

質問者：16a27
質問日時：2011/05/27 18:33
回答数：2件

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の色を戻す」のように、
３箇所全てに記述しなければならないのでしょうか？

テーブルのブロックが少なければ、これでもいいのですが、
たとえば１００個とか１０００個になった時にはとても大変な作業になってしまいます。

他になにか効率のいい記述の仕方はありますでしょうか？
ご存知の方いらっしゃいましたら、ご教授よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： noname#137826
回答日時：2011/05/27 19:44

最後にクリックした要素の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>

- 0
- 件

通報する

この回答へのお礼

レス頂き感謝します。

ご教授してくださった方法で、手を加えましたところ
私が希望する通りの動作をしてくれました！

当方まだ勉強したてなもので、
分かりやすく記述例を作って頂いたことで、とても理解が早まりました。

大変嬉しいです。ありがとうございました<(__)>

通報する

お礼日時：2011/05/27 20:39

No.1

回答者： askaaska
回答日時：2011/05/27 19:41

1000個あるうちの200番目をクリックされたとき

1000個の色を元の色に変えて200番目を改めて色を変える
とやると処理はともかく実装は楽ね。

処理を軽くするには
現在色が変わっている場所
というのを覚えておいて
クリックしたらその場所を戻す
クリックした場所を変える
という風にするんだわ。

- 0
- 件

通報する

この回答へのお礼

レス頂き感謝します。

>処理はともかく
そうなんですよね。記述なら大量の単純作業ですが、
実行したときにやたら重い命令になってしまいます。
タグとしても整理できない汚れた感じがしますし・・

「色の変わっている場所」のidを変数として格納して
格納された場所を直すという方法ですね。

アドバイス頂き、ありがとうございました<(__)>

通報する

お礼日時：2011/05/27 20:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！