人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptの質問です。
style属性の変換ですが、id=bun1とid=bun2の表示を別々にしたいです。
今は表示コンテンツが2つのみですが、10,20と増やしたときでも簡潔にできるコードはどのようになるのでしょうか?
簡潔にまとまっていた方には100P差し上げます。
<html><head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"><!--
var div = false;
function openClose(){
if(!div){
div = true;
$('bun1').style.display = 'block';
$('bun2').style.display = 'none';
} else {
div = false;
$('bun1').style.display = 'none';
$('bun2').style.display = 'block';
}
}
// --></script>
<style type="text/css">
#bun2{ display: none;}
</style>
</head>
<body>
<div id="bun">
<div id="bun1">
<a href="javascript:void(0)" onclick="javascript:openClose();">[詳細]</a>
</div>
<div id="bun2">
■■■<br />
<a href="javascript:void(0)" onclick="javascript:openClose();">[閉じる]</a>
</div>
</div>
<div id="bun">
<div id="bun1">
<a href="javascript:void(0)" onclick="javascript:openClose();">[詳細]</a>
</div>
<div id="bun2">
◆◆◆<br />
<a href="javascript:void(0)" onclick="javascript:openClose();">[閉じる]</a>
</div>
</div>
</div>
</body>
</html>

●質問者: nzk
●カテゴリ:ウェブ制作
✍キーワード:Bun2 JavaScript コンテンツ コード 属性
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● GEN111
●150ポイント

id と class の構成は変更しました。

<html>
 <head>
 <script type="text/javascript" src="js/prototype.js"></script>
 <script type="text/javascript"><!--
 function openClose(obj, mode) {
 inner = obj.parentNode.parentNode.childNodes ;
 for (var i = 0; i < inner.length; ++i)
 if (inner[i].className) inner[i].style.display =
 {bun1 : (mode ? 'none' : 'block'), bun2 : (mode ? 'block' : 'none')}[inner[i].className] ;
 return false ;
 }
 // -->
 </script>

 <style type="text/css">
 .bun2 { display: none; }
 </style>
 </head>

 <body>
 <div class="bun" id="doc1">
 <div class="bun1">
 <a href="javascript:void(0)" onclick="return openClose(this, true)">[詳細]</a>
 </div>
 <div class="bun2">
 ■■■<br />
 <a href="javascript:void(0)" onclick="return openClose(this, false)">[閉じる]</a>
 </div>
 </div>

 <div class="bun" id="doc2">
 <div class="bun1">
 <a href="javascript:void(0)" onclick="return openClose(this, true)">[詳細]</a>
 </div>
 <div class="bun2">
 ◆◆◆<br />
 <a href="javascript:void(0)" onclick="return openClose(this, false)">[閉じる]</a>
 </div>
 </div>

 </body>
</html>
◎質問者からの返答

ありがとうございます!

本当に勉強になり、助かりました。

150P差し上げます!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ