締切済み

【JS（Jquery）】表示切替 show(); hide();

2009/07/12 21:23

お世話になります。ただ今JSのライブラリ（Jquery)を利用してあるプログラムを書いております。以下がそのスクリプトとなり、内容は、配列「tBtn」の1番目がホバーされたら配列「tBlo」の1番目を表示し、「tBlo」の１番目以外は非表示にする。配列「tBtn」の２番目がホバーされたら配列「tBlo」の２番目を表示し、…以下省略。配列「tBtn」の1番目がホバーされたら配列「tBlo」の1番目を表示するという動作は理解できるのですが、「tBlo」の１番目以外を非表示にするにはどういう書き方をすればよろしいでしょうか。どなたかお知恵をお貸しください。 $(function(){ var tBtn = new Array( 'hk', 'tk', 'ho' , 'kt' ); var tBlo = new Array( 'test1', 'test2', 'test3' , 'test4' ); $.each(tBtn, function(i, item) { $("#" + this).hover(function(){ /* if(this != tBtn[i]){ $("#" + tBlo[i]).fadeOut(); } */ },function(){ return false; }); }); });

mayumix2x
お礼率0% (0/3)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

fujillin
ベストアンサー率61% (1594/2576)

2009/07/14 10:49 回答No.2

No1です。 No1の例では、class="a"、"b"…の対応で表示を設定していますが、単純に順番で決めてよいのなら、このclass設定ははずしてしまって、順番で判断するようにしてもよいですね。

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2009/07/13 10:51 回答No.1

jqueryはよく知りませんが… 初期状態と、マウスアウトの動作が不明ですが、こんな感じ？（displayで表示制御をしてますが、show,hideにしても同様のはず） <html> <head> <style type="text/css"> #tBtn button { width:50px; } #tBlo div { display:none; } </style> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function(){ $('#tBtn button').hover(function(){ var cn = this.className; $('#tBlo div').each(function(){ $(this).css({ display: this.className==cn?'block':'none'}); }); }); }); </script> </head> <body> <div id="tBtn"> <button class="a">hk</button> <button class="b">tk</button> <button class="c">ho</button> <button class="d">kt</button> </div> <hr> <div id="tBlo"> <div class="a">test1</div> <div class="b">test2</div> <div class="c">test3</div> <div class="d">test4</div> </div> </body> </html>