JavascriptをつかったHP作成での質問です。

以下のようなことをやりたいと思ってます。
 <A><B>
と書かれた文章があり、<A>にオンマウスすると、
 <A><B>
 <C><D>
というふうにその下に新しいテクストが表示されます。そしてまたたとえば、<C>にオンマウスすると、
 <A><B>
 <C><D>
 <E><F>
のように表示されます。たとえばその状態で、つぎに<B>にオンマウスすると
 <A><B>
 <G><H>
というふうに表示されます。あるいはまた<A>にオンマウスしたのなら
 <A><B>
 <C><D>
というふうに表示されます。つまりだんだん増えていく入れ子構造のテクストをつくりたいと思っています。

「イヌでもわかるJavaScript講座」さんを参考にしましたが思うようにはいきませんでした。
http://www.red.oit-net.jp/tatsuya/java/setumei2.htm
ためしに作ってみたのが以下のページです。
http://www.lunatic-seven.com/javasample1.htm
(一行目→二行目→三行目、と
なんやかやうまくいっているかのように思えますが、つぎに同じことをくりかえすと、二行目から三行目へいくときに二行目が白紙になってしまいます。)
どうすればうまくいくでしょうか。あるいは、参考になるようなホームページはあるでしょうか。
ぜひとも教えてください。

回答の条件
  • 1人2回まで
  • 登録:2008/03/22 17:03:40
  • 終了:2008/03/22 21:40:34

ベストアンサー

id:Numeric No.2

Numeric回答回数83ベストアンサー獲得回数182008/03/22 18:59:56

ポイント60pt

表示中のタグを、myBeforeIDとmyObjの2つで管理するとわかりづらくなってしまいます。

なので、myObjのみで管理するようにしました。

また、myIn2でmyObjを上書きしていたので、myObj2という変数を作りました。

とりあえず動くようになったので、サンプルコードを貼っておきます。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE></TITLE>
<style>

	body{
		padding:40px;
		font-family:Verdana;
		font-size:11pt;
		line-height:150%;
}


	span{
		visibility:hidden;
		position:absolute;
		background:white;
		z-index:1;
}
	a{
		color:#666666;
		text-decoration:none;
}

	a:hover{
		color:black;
}
</style>
</HEAD>
<BODY>
<SCRIPT language="JavaScript"><!--

myObj = null;   //1階層目のタグ
myObj2 = null;  //2階層目のタグ

myOP = window.opera;            // OP
myN6 = document.getElementById; // N6
myIE = document.all;            // IE
myN4 = document.layers;         // N4
if      (myOP) myBR="N6"; // ブラウザは OP6以上
else if (myIE) myBR="I4"; // ブラウザは IE4以上
else if (myN6) myBR="N6"; // ブラウザは NS6以上
else if (myN4) myBR="N4"; // ブラウザは NN4
else           myBR="";   // ブラウザは 分からん

function myBrowserObj(myID){ // 使用中のブラウザの取得
  if (myBR=="N6") myRet=document.getElementById(myID).style;
  else if (myBR=="I4") myRet=document.all[myID].style;
  else if (myBR=="N4") myRet=document[myID];
  else myRet=0;
  return myRet;
}

function myIn(myID){                // マウスが乗った

  if(myObj){                        // コメント表示中?
    myObj.visibility = "hidden";    // 1階層目のコメントを非表示

    if(myObj2){                     // コメント表示中?
      myObj2.visibility = "hidden"; // 2階層目のコメントを非表示
      myObj2 = null;                // 2階層目のタグを初期化
    }
  }
  myObj = myBrowserObj(myID);       // 使用中のブラウザオブジェクト
  if(myObj){                        // ブラウザ対応?
    myObj.visibility = "visible";   // 1階層目のコメントを表示
  }
}

function myIn2(myID2){              // マウスが乗った

  if (myObj2){                      // コメント表示中?
    myObj2.visibility = "hidden";   // 2階層目のコメントを非表示
  }
  myObj2 = myBrowserObj(myID2);     // 使用中のブラウザオブジェクト
  if(myObj2){                       // ブラウザ対応?
    myObj2.visibility = "visible";  // 2階層目のコメントを表示
  }
}
// --></SCRIPT>
<pre>

<a href="" onmouseover="myIn('v0')">リンクA</a>、<a href="" onmouseover="myIn('v1')">リンクB</a>
<span id="v0"><a href="" onmouseover="myIn2('v3')">リンクC</a>、<a href="" onmouseover="myIn2('v4')">リンクD</a></span><span id="v1">1</span>
<span id="v3">3</span><span id="v4">4</span>

</pre>
</BODY>
</HTML>
id:shikakun

ありがとうございます!

ほんとうに助かりました。

回答を参考に(?)行数をふやしてみました。

http://www.lunatic-seven.com/javasample2.htm

みなさん、ありがとうございました。

2008/03/22 21:38:57

その他の回答(1件)

id:susie-t No.1

susie-t回答回数99ベストアンサー獲得回数182008/03/22 18:29:34

ポイント10pt

myBeforeID,myBeforeID2の初期値および判定値"id1"と"id2"に対応する要素が見当たらないのですが・・・。

2回目以降おかしくなるのはmyBeforeID2が"id2"でなくなって、二度と戻らなくなるためです。

とりあえず動かすならmyIn関数に

  myBeforeID2 = "id2";

を追加してください。(この場合、IDというよりそのレベルのメニューが表示されているどうかのフラグですね。)

ただ、この作りで入れ子を増やすのはちょっと大変ですね・・・。

id:shikakun

回答ありがとうございます。

ただぼく自身まったくのド素人なので、もうすこし噛み砕いて説明していただけると助かります。

できればサンプルコードかなにかを書いていただけるとありがたいです。

2008/03/22 18:40:53
id:Numeric No.2

Numeric回答回数83ベストアンサー獲得回数182008/03/22 18:59:56ここでベストアンサー

ポイント60pt

表示中のタグを、myBeforeIDとmyObjの2つで管理するとわかりづらくなってしまいます。

なので、myObjのみで管理するようにしました。

また、myIn2でmyObjを上書きしていたので、myObj2という変数を作りました。

とりあえず動くようになったので、サンプルコードを貼っておきます。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE></TITLE>
<style>

	body{
		padding:40px;
		font-family:Verdana;
		font-size:11pt;
		line-height:150%;
}


	span{
		visibility:hidden;
		position:absolute;
		background:white;
		z-index:1;
}
	a{
		color:#666666;
		text-decoration:none;
}

	a:hover{
		color:black;
}
</style>
</HEAD>
<BODY>
<SCRIPT language="JavaScript"><!--

myObj = null;   //1階層目のタグ
myObj2 = null;  //2階層目のタグ

myOP = window.opera;            // OP
myN6 = document.getElementById; // N6
myIE = document.all;            // IE
myN4 = document.layers;         // N4
if      (myOP) myBR="N6"; // ブラウザは OP6以上
else if (myIE) myBR="I4"; // ブラウザは IE4以上
else if (myN6) myBR="N6"; // ブラウザは NS6以上
else if (myN4) myBR="N4"; // ブラウザは NN4
else           myBR="";   // ブラウザは 分からん

function myBrowserObj(myID){ // 使用中のブラウザの取得
  if (myBR=="N6") myRet=document.getElementById(myID).style;
  else if (myBR=="I4") myRet=document.all[myID].style;
  else if (myBR=="N4") myRet=document[myID];
  else myRet=0;
  return myRet;
}

function myIn(myID){                // マウスが乗った

  if(myObj){                        // コメント表示中?
    myObj.visibility = "hidden";    // 1階層目のコメントを非表示

    if(myObj2){                     // コメント表示中?
      myObj2.visibility = "hidden"; // 2階層目のコメントを非表示
      myObj2 = null;                // 2階層目のタグを初期化
    }
  }
  myObj = myBrowserObj(myID);       // 使用中のブラウザオブジェクト
  if(myObj){                        // ブラウザ対応?
    myObj.visibility = "visible";   // 1階層目のコメントを表示
  }
}

function myIn2(myID2){              // マウスが乗った

  if (myObj2){                      // コメント表示中?
    myObj2.visibility = "hidden";   // 2階層目のコメントを非表示
  }
  myObj2 = myBrowserObj(myID2);     // 使用中のブラウザオブジェクト
  if(myObj2){                       // ブラウザ対応?
    myObj2.visibility = "visible";  // 2階層目のコメントを表示
  }
}
// --></SCRIPT>
<pre>

<a href="" onmouseover="myIn('v0')">リンクA</a>、<a href="" onmouseover="myIn('v1')">リンクB</a>
<span id="v0"><a href="" onmouseover="myIn2('v3')">リンクC</a>、<a href="" onmouseover="myIn2('v4')">リンクD</a></span><span id="v1">1</span>
<span id="v3">3</span><span id="v4">4</span>

</pre>
</BODY>
</HTML>
id:shikakun

ありがとうございます!

ほんとうに助かりました。

回答を参考に(?)行数をふやしてみました。

http://www.lunatic-seven.com/javasample2.htm

みなさん、ありがとうございました。

2008/03/22 21:38:57

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

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

トラックバック

  • いるかのお礼 空の向こうへ 2008-03-23 20:18:01
    この度はいるかをいただきまして、ありがとうございます。 お礼にというのもなんですが、若干の改良を加えたコードを貼っておきます。 変更点 階層を簡単に増やせるように、変数を配
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

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