こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSのID名に配列を使えませんか?

以下のようなソースで、項目ごとにサブメニューの開閉をしようとしているのですが、サンプルの#a1~に該当するID名を、配列として定義することってできませんか?

<style type="text/css"><!--
#a1 { display:none; }
#a2 { display:none; }
#a3 { display:none; }
// --></style>
<script type="text/javascript"><!--
function disp(aaa) {
obj = document.getElementById(aaa);
if( obj.style.display =="block" ){
obj.style.display ="none";
}else{
obj.style.display ="block";
}
}
function create(bbb){
document.write(bbb);
}
// --></script>
<body>
ああああ<a href="javascript:void(disp('a1'))">◎</a><div id="a1"><script type="text/javascript">create("アアアア");</script></div><br>
いいいい<a href="javascript:void(disp('a2'))">◎</a><div id="a2"><script type="text/javascript">create("イイイイ");</script></div><br>
うううう<a href="javascript:void(disp('a3'))">◎</a><div id="a3"><script type="text/javascript">create("ウウウウ");</script></div><br>

投稿日時 - 2008-05-27 12:00:53

QNo.4054112

困ってます

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

idの仕様上無理です。またやる必要もないと思います。

本件の場合アンカーの直後のdivタグの表示/非表示をきりかえるという
仕組みでしたら、いかのようにしてみてはいかがでしょうか?

<style type="text/css">
.hide{ display:none; }
</style>
<script type="text/javascript">
function disp(obj) {
while(obj){
if(obj.nodeName=="DIV"){
obj.className=obj.className=="hide"?"":"hide";
obj=obj.parentNode.lastChild;
}
obj=obj.nextSibling;
}
return false;
}
</script>
ああああ<a href="#" onClick="return disp(this)">◎</a><div class="hide">アアアア</div>
いいいい<a href="#" onClick="return disp(this)">◎</a><div class="hide">イイイイ</div>
うううう<a href="#" onClick="return disp(this)">◎</a><div class="hide">ウウウウ</div>

投稿日時 - 2008-05-27 12:16:39

補足

できました。ありがとうございます。

補足ですが、class="hide"内にも、非表示にするボタンを

<div class="hide">
<a href="#" onclick="return disp2(this)">×</a>
アアアア
</div>

というように設置したい場合は、どのようにfunction disp2(obj)を
記述すればよいのでしょうか…

投稿日時 - 2008-05-27 14:24:21

お礼

解決しました。ありがとうございました。
ノードの参照をもっと勉強しようと思います。

投稿日時 - 2008-05-27 15:45:32

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

あ、falseを返してあげてください

function disp2(obj) {
obj.parentNode.className="hide";
return false;
}

投稿日時 - 2008-05-27 14:43:37

お礼

解決しました。ありがとうございました。
ノードの参照をもっと勉強しようと思います。

投稿日時 - 2008-05-27 15:47:46

ANo.2

その場合、アンカーの親ノードのクラス名を変更するだけですので、
以下のようにすると効率的でしょう

function disp2(obj) {
obj.parentNode.className="hide";
}

投稿日時 - 2008-05-27 14:39:51

あなたにオススメの質問