onchangeで画像の表示

質問

大カテゴリーの画像をクリックすると中カテゴリーの画像を表示させたいと思っています。中カテゴリーの画像は大カテゴリーの画像をクリックすることにより表示されるという形にしたいです。また大カテゴリーの画像を再度クリックすると中カテゴリーの画像が消えるというのはできるでしょうか？
これってonclickとonchangeですか？教えてください。

回答No.1

yambejp · ベストアンサー

>これってonclickとonchangeですか？

やり方はいろいろ考えられますがonclickだけでいけるんじゃないでしょうか？
中カテゴリをグルーピングして以下のような処理をすると汎用性が
あります。

<script>
function hoge(obj){
var n=obj.nextSibling;
while(n){
if(n.nodeName=="DIV") break;
n=n.nextSibling;
}
n.className=n.className==""?"hide":"";
}
</script>
<style>
.hide{
display:none;
}
</style>
<div>
<img src="1.jpg" onclick="hoge(this)">
<div class="hide">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
</div>
</div>

大カテゴリー・中カテゴリーというと小カテゴリーもあるんですよね？
イメージがわかないので具体的な仕様をもうすこしつっこんで
書いた方がよいでしょう。

お礼

すみません。アホな補足を書き込んでしまいました。
うまくいきました。
ありがとうございます。

補足

ご返答ありがとうございます。
大カテゴリー１つの場合に動作が確認できました。
複数の大カテゴリーがあり、thisの部分に異なる数字を与えて実行したところうまくいきません。そんな簡単なものではないんですかね！？
お恥ずかしい限りです。

回答No.4

noname#84373

「大・中・小！」と言葉で言われてもチンプンカンプン！
実際のコードを見せてくれれば、回答が早いのでは？

回答No.3

noname#84373

yambejpさんの書いたコードでは、this のまま使います
わざわざ画像の次にある<div>タグを探して、そこを
書き換えるように書いてくださってますよ！

補足

yambejpさんのコードでうまくいきました。
ご指摘ありがとうございます。
しかしながら、大カテゴリを選択して小カテゴリーを選択すると小カテゴリーのツリーが閉じてしまいます。
小カテゴリーを選択しても小カテゴリーのツリーを閉じない方法はないでしょうか？
(大カテゴリと小カテゴリーの２カテゴリーしかない仕様です。)

回答No.2

fujillin

いまひとつ、イメージがよくつかめませんが、
要は、中カテゴリーの画像の表示/非表示をトグルで行えればよいということでしょうか？

表示/非表示をどのように切り替えるかが不明ですが、とりあえずdisplay:block/noneでよいとするなら、大カテゴリーのonclickイベント処理で、中カテゴリーの表示状態を現状と反転させればよいと思われます。

例えば、
eDsp=document.getElementById( ～).style.display; //←中カテの画像
eDsp=(eDsp=='none')?'block':'none';
みたいな感じ

画像が複数あるときは、まとめておいて行うのが簡単かと…