- 締切済み
【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; }); }); });
- mayumix2x
- お礼率0% (0/3)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
No1です。 No1の例では、class="a"、"b"…の対応で表示を設定していますが、単純に順番で決めてよいのなら、このclass設定ははずしてしまって、順番で判断するようにしてもよいですね。
- fujillin
- ベストアンサー率61% (1594/2576)
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>
- 参考URL：
- http://semooh.jp/jquery/
関連するQ&A
- jQueryで簡易なスライドショーを作ったのですが
jQueryの練習に簡易なスライドショーを作ったのですが、画像を変えるごとに画面の一番上まで戻ってしまいます。以下にコードを載せますので、どなたかご教示いただければ幸いです。 $(function(){ var num = 0; $(".slideshow").click(function(){ $(this).fadeOut("500",function(){ var ptnum = (++num)%5 + 1; //5枚の画像をクリックで変える var ptname = "photos/pt_00" + ptnum + ".jpg"; $(this).attr("src",ptname); $(this).fadeIn("500"); }); }); }) HTMLの方は何の変哲もない <img src="photos/pt_001.jpg" class="slideshow" /> となっています。
- ベストアンサー
- JavaScript
- Javascript スライドショー
Webページを作成しているのですが、JavaScriptで指定フォルダ内の画像をスライドショー形式で表示したいと思って、以下のコードを書いたのですが、どうも、上手く動作しないです。 おそらく最後の $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } が上手く動いていないと思うのですが、よく分かりません。 どなたか、分かる方いらっしゃいましたら、教えて頂けると助かります。 よろしくお願い致します。 <script type='text/javascript'> var images=new Array(); images[0]='images/1.jpg'; images[1]='images/2.jpg'; images[2]='images/3.jpg'; images[3]='images/4.jpg'; var currentImage = 0; var preloaded=false; var preloading = false; function preload(){ preloading=true; for(var i=0; i<images.length; i++){ var img = new Image(); img.src=images[i]; images[i] = img; } preloaded=true; } function animateImages(){ // if already preloading, we just want to return nothing if(!preloaded && preloading) return; // if not preloaded, we want to preload if(!preloaded) preload(); // considering we have already loaded stuffs currentImage++; currentImage = currentImage % 4; $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } ); } </script>
- 締切済み
- JavaScript
- Javascript スライドショー
Webページを作成しているのですが、JavaScriptで指定フォルダ内の画像をスライドショー形式で表示したいと思って、以下のコードを書いたのですが、どうも、上手く動作しないです。 おそらく最後の $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } が上手く動いていないと思うのですが、よく分かりません。 どなたか、分かる方いらっしゃいましたら、教えて頂けると助かります。 よろしくお願い致します。 <script type='text/javascript'> var images=new Array(); images[0]='images/1.jpg'; images[1]='images/2.jpg'; images[2]='images/3.jpg'; images[3]='images/4.jpg'; var currentImage = 0; var preloaded=false; var preloading = false; function preload(){ preloading=true; for(var i=0; i<images.length; i++){ var img = new Image(); img.src=images[i]; images[i] = img; } preloaded=true; } function animateImages(){ // if already preloading, we just want to return nothing if(!preloaded && preloading) return; // if not preloaded, we want to preload if(!preloaded) preload(); // considering we have already loaded stuffs currentImage++; currentImage = currentImage % 4; $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } ); } </script>
- 締切済み
- JavaScript
- forの中にいれたcreateTextの使い方
はじめまして、 内容をまとめて書いてあるテキストがあり、これを変数に入れて分割したものを画面に表示させたいのですが、表示するところがうまくいきません。 createTextの書き方がおかしいと思うのですがどこを書き換えればいいのかわかりません。 すいませんがどなたかお教え願えないでしょうか。 var text1=new LoadVars(); text1.load("test.txt") text1.onLoad=function(){ var test_array:Array=text1.split(","); for(var i=0;i<test_array.length;i++){ this.createTextField("c"+[i],this.getNextHighestDepth(),50,20+i*20,200, 20); this.c[i].text =test_array[i]; } 多分thisのあたりがおかしいと思っているのですが、どう書けばいいのかわかっていません。 すいませんがどなたかお願いします。
- 締切済み
- Flash
- ループ処理を抜けた時点での処理回数を表示したい
今、以下のような「green」が配列の何番目にあるのか調べるプログラムを考えています。 具体的な処理としては、配列の値を順番に調べて「green」を見つけたらループをぬけて何番目にあったかを表示する、といった処理になります。 ただ、現時点ではループをぬけた時何番目だったのかを取得できないでいます。 $numを取得して表示するにはどのような処理を行えばよいでしょうか。 解説していただけると幸いです。 ---プログラム--- class hoge{ function hoge(){ $this->color = array("red", "blue", "pink", "white", "black", "gold", "yellow"...,"green",...); } function test(){ for($i = 0;$i < count($this->color);$i++){ if($this->color[$i] == 'green'){ echo $this->color[$i]."\n"; break;###ここでループをぬける } } echo "緑は${num}番目"; } } $a = new hoge(); $a->test(); ---
- ベストアンサー
- PHP
- jqueryのajax()内からグローバル配列に
jqueryのajax(){success: function()内からグローバル連想配列に値を格納したい。 jqueryのajax()でhtmlファイルを読み込み配列に格納。 その後他の関数で使いたいと考えていますが グローバル連想配列に格納できません。 success: function()内でさらに関数を定義もして見ましたが反応せず。。。 （プルダウンメニューを変更したら実行する関数） 以下ソースになります。 ----------------------------------------------------------- $(function() { objectarray = new Object(); $.ajax({ type: 'GET', url: 'hoge.html', dataType: 'html', success: function(data) { var text = []; $(data).each(function(i){ text = $(this).text().split("\n"); }); var alldata = $.grep(text, function(e){return e;});//空白やデータなしを削除 for(i=0; i<alldata.length; i++){ objectarray[i] = (alldata[i]); alert("forの中" + objectarray[i]);//取得できた } alert("forの外" + objectarray);//取得できた return objectarray;//あってもなくても変わらない。。。 }, error:function() { alert('問題がありました。htmlデータがありませんでした。'); } //return objectarray;←有効にするとjsが認識されなくなります。 }); alert("ajaxの外" + objectarray[0]);//何も表示されない、firebugでみるとobjectarrayには値が入っている。 }); ----------------------------------------------------------- 上記はnew Object()でやっておりますがnew Array()でも同じ結果でした。 回避策をご教授いただけましたら幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- unityで今プログラムを組んでいます
今prefabで生成した物（クローン）のY座標を配列に入れて その中で現在一番数値の多いものを表示というものを作りたいのですが以下のプログラムだと 現在の高さではなくクリックで生成した物の高さになってしまいます。 理由が分からないのでアドバイスお願いします。 var test : Transform; var foo2 = new Array(); function Update(){ //クリック if (Input.GetButtonDown ("Fire1")) { Instantiate(test, transform.position, transform.rotation);//生成 } } //判定 function OnCollisionEnter(info : Collision) { foo2[i] = this.transform.position.y;//配列代入 //配列の中身調べる for(var A = 0; A <= i; A++){ if(foo2[i] > SavePos_y){ SavePos_y = foo2[i]; Debug.Log(foo2[i]); i++; } }
- 締切済み
- JavaScript
- jQueryを使ってランダムに表示
jQueryを使って5つのボックス要素を、ランダムに3つ表示させています。 現在はページを読み込むたびに表示を切り替えていますが、これを「一定時間で表示を切り替え」に変更する事は可能でしょうか？ できればjsのみの修正でできれば良いのですが…。 どなたかお助けください。よろしくお願いいたします。 jsとhtmlは以下のようにしています。 jQuery(function($) { $.fn.extend({ randomdisplay : function(num) { return this.each(function() { var chn = $(this).children().hide().length; for(var i = 0; i < num && i < chn; i++) { var r = parseInt(Math.random() * (chn - i)) + i; $(this).children().eq(r).show().prependTo($(this)); } }); } }); $(function(){ $("[randomdisplay]").each(function() { $(this).randomdisplay($(this).attr("randomdisplay")); }); }); }); <div randomdisplay="3"> <div id="box">ランダム1</div> <div id="box">ランダム2</div> <div id="box">ランダム3</div> <div id="box">ランダム4</div> <div id="box">ランダム5</div> </div>
- ベストアンサー
- JavaScript
- トリッキーなJSの文法（prototype.jsなど）が分かりません
Ajaxの「prototype」( http://www.prototypejs.org/ )などで 下記のようなfunctionの記述方法をよく見かけます。 ▼Prototype.js（ver1.5.0） 20行目抜粋 ---------------------------------------- var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } -------------------------------------------- でも、私には高度すぎて以下の点がどうしても読み解けません。 （1）var Class = {～～～～～～} が、何をしているのか分かりません。 配列なら[ ]ですし関数か何かを省略した宣言の記述方法なのでしょうか？ （2）create: が何なのか分かりません。必死で調べたら型を宣言しているような感じでしたが、 見慣れない「：」を使ったプログラムで検討もつきません。 私が知っているfunction宣言はこの2パターンのみしか知りません。 ・一般的なfunction宣言 function test(hikisu){ //処理内容 } ・無名関数でのfunction宣言 var a = function(x) { //処理内容 } ぜひ教えていただけませんでしょうか。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- 文字列と配列の振る舞いの違いについて
以下のコードで出るalertが Array => 12 String => 2 となります。この原因といいますか原理をご存じでしたら教えていただけませんでしょうか。お願いします。 =========================================================== var test = function(name){ this.arr.push(name); this.str += name; } test.prototype = { arr:[], str:"" } var r = new test("1"); var z = new test("2"); alert("Array => " + z.arr.join("") + "\nString => " + z.str);
- ベストアンサー
- JavaScript
