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>

回答の条件
  • 1人3回まで
  • 登録:2007/10/18 13:02:35
  • 終了:2007/10/18 15:02:18

回答(1件)

id:GEN111 No.1

GEN111回答回数472ベストアンサー獲得回数582007/10/18 14:15:38

ポイント150pt

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>
id:makotoworld

ありがとうございます!

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

150P差し上げます!

2007/10/18 15:00:25

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません