javascriptの勉強をしています。
htmlのテーブルタグで、ブロックが3つあるとします。
■■■
それぞれのブロックを<div id="00"><div id="01"><div id="02">
として定義しています。
onclick="document.getElementById('00').style.backgroundColor='#ff0000'
でクリックしたブロックの色を変更しています。
質問したい内容は、「1箇所をクリックした時に、他の2箇所の色を戻す」方法です。
以下はサンプルです。
--------------------------------------
<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>---------------------------------------------
1箇所をクリックした時に、他の2箇所の色を戻すには
「00をクリックした時に、01の色を戻す02の色を戻す」のように、
3箇所全てに記述しなければならないのでしょうか?
テーブルのブロックが少なければ、これでもいいのですが、
たとえば100個とか1000個になった時にはとても大変な作業になってしまいます。
他になにか効率のいい記述の仕方はありますでしょうか?
ご存知の方いらっしゃいましたら、ご教授よろしくお願いいたします。
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>
レス頂き感謝します。
ご教授してくださった方法で、手を加えましたところ
私が希望する通りの動作をしてくれました!
当方まだ勉強したてなもので、
分かりやすく記述例を作って頂いたことで、とても理解が早まりました。
大変嬉しいです。ありがとうございました<(__)>
No.1
- 回答日時:
1000個あるうちの200番目をクリックされたとき
1000個の色を元の色に変えて200番目を改めて色を変える
とやると処理はともかく実装は楽ね。
処理を軽くするには
現在色が変わっている場所
というのを覚えておいて
クリックしたらその場所を戻す
クリックした場所を変える
という風にするんだわ。
レス頂き感謝します。
>処理はともかく
そうなんですよね。記述なら大量の単純作業ですが、
実行したときにやたら重い命令になってしまいます。
タグとしても整理できない汚れた感じがしますし・・
「色の変わっている場所」のidを変数として格納して
格納された場所を直すという方法ですね。
アドバイス頂き、ありがとうございました<(__)>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
読み込んだQRコードをフォーム...
-
表示・非表示のスクリプトで、...
-
マウスを乗せるとメニュー表示
-
バッチファイルでカウントアッ...
-
removeAttribute()メソッドで削...
-
タブで開いてさらにタブ内をア...
-
console.log結果をhtmlで表示し...
-
折りたたみ部分にアンカーでリ...
-
createElementで作成した要素を...
-
多次元配列を連想配列へ変換したい
-
HTMLタグに複数のクラスを設定...
-
取得した要素がインライン要素...
-
javascriptでスタイルを動的に...
-
getElementByIdの戻り値がnull...
-
document.getElementById( ).st...
-
CSSで指定したwidthをマウスで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
タブで開いてさらにタブ内をア...
-
変数名をどのようにつけるのが...
-
クリックで色変更後に既に変更...
-
表示・非表示のスクリプトで、...
-
HTMLとJavaScriptで作ったタイ...
-
console.log結果をhtmlで表示し...
-
jQueryでクリックされた要素のi...
-
HTMLタグに複数のクラスを設定...
-
指定したパスが現URLに含まれて...
-
iframe内のリンクが飛ばないの...
-
背景色を透明化
-
テキストエリア内の一部の文字...
-
変数内容をHTML内で表示する方法
-
classの中の<a>タグにidを追加
おすすめ情報