ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜FAQ

質問
質問者：mayumix2x 【JS（Jquery）】表示切替 show(); hide();
困り度：
  • すぐに回答を！
 お世話になります。
ただ今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;
});
});

});
質問投稿日時：09/07/12 21:23
質問番号：5120349
最新から表示｜回答順に表示

回答

 
回答者：fujillin No1です。

No1の例では、class="a"、"b"…の対応で表示を設定していますが、単純に順番で決めてよいのなら、このclass設定ははずしてしまって、順番で判断するようにしてもよいですね。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：09/07/14 10:49
回答番号：No.2
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：fujillin 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>
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：09/07/13 10:51
回答番号：No.1
参考URL： ​http://semooh.jp/jquery/​
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼この回答にお礼をつける(質問者のみ)
最新から表示｜回答順に表示
このページのトップへ