jQueryを使った要素のソートと表示数の増加機能の実装方法
- jQueryを使用して、カテゴリーボタンを押すと上位3つの要素が表示される機能を実装する方法は、ltフィルターを使用することです。
- もっと見るボタンを押すたびに表示される要素の数を増やす動作を実装するには、ltフィルターのパラメータを動的に変更する必要があります。
- 具体的には、要素の数を保持する変数を用意し、もっと見るボタンが押される度に変数の値を増やし、ltフィルターのパラメータに変数を使用することで実現できます。
- ベストアンサー
要素をソートしてその要素を三つずつ表示するには
お世話になっております。 最近、jQueryを使い始めたjavascript初心者です。 以下の動作を実装したいのですが、どうすればいいでしょうか？ 1.カテゴリーボタン（中華、和食、洋食）を押すとそのカテゴリー要素の上位三つのみが表示される。 2.もっと見るボタンを押す度に表示させているカテゴリー要素が三つずつ増えていく。 各カテゴリー要素の上位三つを表示させるのは jQueryのltフィルターを使うことでできたのすが、もっと見るボタンで三つずつ表示要素を増やしていく動作がうまくいきません。 $(".chinese:lt(3)").show();のli()の数値部分を変数にし、 もっと見るボタンを押すたびに変数Numに値を+3してltの数値を動的に変更することができればうまくいくと思ったのですが $(".chinese:lt(Num)").show(); これでは動作しません。 以下ソースです。 ご回答よろしくお願いいたします。 http://foofoo77.web.fc2.com/imagechange/sort.html <head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(function(){ var Num = 3; $("#chinese-btn").click(function(){ $("li").hide(); $(".chinese:lt(Num)").show(); }); $("#japanese-btn").click(function(){ $("li").hide(); $(".japanese:lt(2)").show(); }); $("#european-btn").click(function(){ $("li").hide(); $(".european:lt(2)").show(); }); $("#add-seeing").click(function(){ Num +=2; alert(Num); }); }); </script> <style type="text/css"> li { display: none; } </style> </head> <h1>ソート</h1> <button id="chinese-btn">中華</button> <button id="japanese-btn">和食</button> <button id="european-btn">洋食</button> <ul> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> </ul> <button id="add-seeing">もっと見る</button>
- whosfoo
- お礼率77% (21/27)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
jQueryのセレクタは「文字列」であることに注意してください。 > $(".chinese:lt(Num)").show(); この部分、ダブルクオートに囲まれた文字列の中で、ltに「Num」という英数字3文字を指定していることになります。 そうではなく、変数Numの値を入れたい場合は、 > $(".chinese:lt("+Num+")").show(); としてください。「".chinese:lt("+Num+")"」は、Numが3のときは「".chinese:lt(3)"」という文字列になりますし、Numが6のときは「".chinese:lt(6)"」という文字列になります。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
こんなかんじで、どうでしょう。 * 同じボタンを続けて押しても、addボタンと同じ動作になるようにしています。 （addボタンが押しにくいので・・・） （インデントは全角空白にしてあります） $(function(){ var num = 0, type = 0; $("#chinese-btn").click(function(){set(0);}); $("#japanese-btn").click(function(){set(1);}); $("#european-btn").click(function(){set(2);}); $("#add-seeing").click(function(){ num += 3; display(); }); function set(t){ num += 3; if(type != t){ type = t; num = 3; } display(); } function display(){ var selector = [".chinese",".japanese",".european"][type] + ":lt(" + num + ")"; $("li").hide(); $(selector).show(); } });
お礼
ご回答ありがとうございます。 Jqueryでコーディングを行う際に考え方として非常に参考になりました。 ベストアンサーを一つしか付ける事ができなくて、残念ですが、このご回答にもベストアンサーを付けたい気持ちです。
関連するQ&A
- jqeryについて
[script] $(function() { $(".btn").on('click',function(){ Tmp=$(this).attr('id').replace('button','p'); $(".box").hide(); $("#"+Tmp).show(); }); }); [css] .box{ display:none; } [html] <p id="p1" class="box">テスト１</p> <p id="p2" class="box">テスト2</p> <p id="p3" class="box">テスト3</p> <input type="button" id="button1" value="ボタン1" class="btn" /> <input type="button" id="button2" value="ボタン2" class="btn" /> <input type="button" id="button3" value="ボタン3" class="btn" /> 上記のコードのボタン部分、表示部分を変えたいのですがうまくいかないので教ええてください。 <input type="button" id="button1" value="ボタン1" class="btn" />ここの部分を<p id="tab1 class="tab">に変更し、 <p id="p1" class="box">テスト１</p> ここの部分を <div class="">(cssでアイテム（ul）全体を右に寄せています。) <ul> <a href="/"><li><img src="hoge/hoge1.png"><p>hogehoge</p></li></a> <a href="/"><li><img src="hoge/hoge2.png"><p>hoge</p></li></a> </ul> </div> よろしくお願いします。
- ベストアンサー
- JavaScript
- 不必要になった要素を非表示にしたいのですが、良い方法を教えて下さい。
こんにちは、お世話になります。 早速ですが、質問させてください。 リスト表示している要素をクリックしたら、その要素の上にフォームを表示してポストしたいと思っています。 おおよそ出来る様になったのですが、不必要になったと思われる時に、非表示にする事ができません。 フォームを表示している<div>以外の部分をクリックしたり、入力部からフォーカスが外れた時に非表示にするにはどのようにすれば良いか教えて下さい。 jQueryを使っています。firefox 3 で動けば良いと思っています。 見にくいと思いますが、以下に出来るだけ簡略化した物を貼り付けます（tabを全角スペースにしてあります）。よろしくおねがいします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('span').each(function(){ $(this).click(function(){ $('#form_box').hide(); $('#name').val($(this).html()); var offset = $(this).offset(); $('#form_box').css({'top' : offset.top , 'left' : offset.left }).show('fast',function(){$('#name').focus()}); }); }) //$('#name').blur(function(){$('#form_box').hide();}) }); function hide() { $('#form_box').hide(); return false; } </script> <style type="text/css"> span { cursor : pointer; } </style> </head> <body> <ul> <li><span>1</span> <ul> <li><span>1-1</span></li> </ul> </li> <li><span>2</span> <ul> <li><span>2-1</span> <ul> <li><span>2-1-1</span></li> </ul> </li> <li><span>2-2</span></li> </ul> </li> </ul> <div id="form_box" style="display:none;position:absolute;"> <form onsubmit="alert('送信')"> <input type="text" id="name" /> <input type="submit" value="送信" /> <button onclick="return hide();">閉じる</button> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
- jQueryでリストを分割してページ送りを表示
現在、以下の内容でリストを分割してページ送りで切り替えられる様にしています。 [jQuery] $(function() { var item = $('#list li').length; var i = 0; while (i < item){ var group = i * 10; var num = group + 10; for (var j = group; j < num; j++) { $('#list li').eq(j).addClass('num'+(i+1)); } i++; } /* Pagenation */ $('#list').after('<ul id="nav"></ul>') var lastrep = $('#list li:last').attr('class').replace(/no/i,''); var lists = ""; for (var i = 0; i < lastrep; i++) { lists += '<li class="page-count">'+( i+1 )+'</li>\n'; } $("nav").append(lists); /* First View */ $('#list li').hide(); $('#list .no1').show(); $('#nav li').eq(0).addClass('current'); /* Click */ $('#nav li').click(function () { var items = $(this).parent().children().index(this); var setitems = items +1; $('#list li').hide(); $('#list .no'+setitems).show(); $('#nav li').removeClass('current'); $(this).addClass('current'); }); }); [html] <ul id="nav"> <li class="page-count current">1</li> <li class="page-count">2</li> <li class="page-count">3</li> <li class="page-count">4</li> </ul> <ul id="list"> <li class="no1">item</li> <li class="no1">item</li> ... <li class="no4">item</li> </ul> このページネーションの部分を次の様にするにはどうしたら良いでしょうか…？ [html] <ul id="nav"> <li class="page-count">Prev</li> <li class="page-count">Next</li> </ul> <div class="count"><span class="now">1</span>/<span class="total">4</span></div>
- ベストアンサー
- JavaScript
- jQueryの否定疑似クラスが効かない
いつも、こちらでお世話になっているものです。 日々、jQueryと格闘中でして、 またまたjQuery関連で分からないところが出てきてしまいました。 ボタンを配置していて、そのボタンをクリックしたら lightbox風にコンテンツが表示されるようにしています。 (表示コンテンツは以下スクリプトで言うとdiv.overLayerContents) 表示は問題なくできるのですが、 そのあとに、コンテンツ部分以外をクリックしたら hide()させるように以下のように設定してみました。 ですが、コンテンツ部分をクリックしてもhide()が実行されるのです。 例えば、pとかliとかをクリックしても、hide()が実行され、閉じてしまうのです。 否定疑似クラスをつけず、 #overLayerだけにすると、一応、hide()は機能するので 多分、否定疑似クラス:not～がうまく機能していないみたいなんです。 以下、スクリプトを書きましたので、 詳しい方、ご教授下さい。 どうぞ宜しくお願いいたします。 ▼スクリプト ---------------------- $(function(){ $("#glayLayer , #overLayer:not(.overLayerContents)").click(function(){ $("#glayLayer").hide(); $("#overLayer").hide(); }); $("#btn").click(function(){ $("#glayLayer").show(); $("#overLayer").show().css("marginTop","5px"); return false; }); }); ▼html ---------------------- <div id="glayLayer"></div> <div id="overLayer"> <div class="overLayerContents"> <p>タイトル</p> <ul> <li>コンテンツ1</li> <li>コンテンツ2</li> <li>コンテンツ3</li> </ul> </div> </div> <div id="btn">ボタン</div> ---------------------- ※#glayLayer , #overLayerとも、 最初にcssでdisplay:noneにしています。
- ベストアンサー
- JavaScript
- 2つのULの中のリストをランダムで隙間なく表示
よろしくお願いいたします。 タイトル、ちょっと詰め込みすぎました。。 ■幅が400pxのdivの中に200pxのulを2つ並べてあります。 ■ulの中に200pxサイズのboxと100pxサイズの正方形ボックス（li）があります。 ■2つのulの中にあるliを一度全て合わせて、それをランダムにして表示したいです。 ■その際、100pxサイズのボックスは必ず2個セットで表示させたいです。 ↑100pxが1個しか表示されない列は100pxの隙間が出来てしまうため。 ulごとのランダムはできたのですが、2つのulのliを合わせてランダムに出力するのがうまくいきません。 隙間についても、どういう風にコーディングをすればいいのか悩んでます。。 参考サイトでも構いません。アドバイスをお願いいたします。 [html] <style> div{width:400px;} ul{width:200px;display:inline-block;} li{display:inline-block;} .size100{width:100;height:100;} .size200{width:200;height:200;} </style> <div randomdisplay="10"> <ul class="rnd_a"> <li class="width100">0</li> <li class="width200">1</li> <li class="width100">2</li> <li class="width200">3</li> <li class="width100">4</li> </ul> <ul class="rnd_b"> <li class="width200">5</li> <li class="width100">6</li> <li class="width100">7</li> <li class="width100">8</li> <li class="width200">9</li> </ul> </div> [js] jQuery(function($) { $.fn.extend({ randomdisplay : function(num) { return this.each(function() { var chn = $(this).children(".rnd_a").children("li").hide().length; var chn2 = $(this).children(".rnd_b").children("li").hide().length; for(var i = 0; i < num && i < chn; i++) { var r = parseInt(Math.random() * (chn - i)) + i; $(this).children(".rnd_a").children("li").eq(r).show().prependTo($(this).children(".rnd_a")); console.log(r); } for(var i = 0; i < num && i < chn2; i++) { var r = parseInt(Math.random() * (chn2 - i)) + i; $(this).children(".rnd_b").children("li").eq(r).show().prependTo($(this).children(".rnd_b")); } }); } }); $(function(){ $("[randomdisplay]").each(function() { $(this).randomdisplay($(this).attr("randomdisplay")).children(".rnd_a").children("li"); }); }); }); javascriptについてあまり知識がなく、WEB上から見つけたものを流用しております。 chnで数を取得し、rでランダム、$(this).children(".rnd_a").children("li").eq(r).show().prependTo($(this).children(".rnd_a")); で出力しているのだと思うのですが、新しい変数にchn + chn2としてランダムさせるとめちゃくちゃに。。 よろしくお願いいたします。
- 締切済み
- JavaScript
- オンマウスで表示されるテキスト
先ほどhttp://okwave.jp/qa4091921.htmlで質問させて頂いた者です。 下記のソースコードをお教え頂いたのですが、初めてページを開いた 時に↓の部分がすでに表示されている状態にするには、どうしたらよ いのでしょうか？ どうぞよろしくお願い致します。 ページを開いたときに表示していたい部分 -------------------------------------------- <ul class="hide" id="sub1"> <li>親メニュー1のサブメニュー1 <li>親メニュー1のサブメニュー2 <li>親メニュー1のサブメニュー3 <li>親メニュー1のサブメニュー4 </ul> -------------------------------------------- 教えて頂いたソースコード <style> .hide{ display:none; } </style> <script> function show(id){ var obj=document.getElementById(id); var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="UL") n.className="hide"; n=n.nextSibling; } obj.className=""; } </script> <ul> <li><a href="#" onMouseover="show('sub1')">親メニュー1</a></li> <li><a href="#" onMouseover="show('sub2')">親メニュー2</a></li> <li><a href="#" onMouseover="show('sub3')">親メニュー3</a></li> <li><a href="#" onMouseover="show('sub4')">親メニュー4</a></li> </ul> <hr> <div> <ul class="hide" id="sub1"> <li>親メニュー1のサブメニュー1 <li>親メニュー1のサブメニュー2 <li>親メニュー1のサブメニュー3 <li>親メニュー1のサブメニュー4 </ul> <ul class="hide" id="sub2"> <li>親メニュー2のサブメニュー1 <li>親メニュー2のサブメニュー2 <li>親メニュー2のサブメニュー3 <li>親メニュー2のサブメニュー4 </ul> <ul class="hide" id="sub3"> <li>親メニュー3のサブメニュー1 <li>親メニュー3のサブメニュー2 <li>親メニュー3のサブメニュー3 <li>親メニュー3のサブメニュー4 </ul> <ul class="hide" id="sub4"> <li>親メニュー4のサブメニュー1 <li>親メニュー4のサブメニュー2 <li>親メニュー4のサブメニュー3 <li>親メニュー4のサブメニュー4 </ul> </div>
- ベストアンサー
- JavaScript
- ボタンを押すとデータ表示、再度押すと非表示
ボタンを押すとデータが表示されるjqueryを利用したjavascriptがあります。 このボタンを再度クリックすると非表示にしたいと考えています。 奇数回クリック=表示 偶数回クリック=非表示 という形です。 ご教授いただきたくお願いいたします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#data").show(); }); </script> <button class="button18" id="btn0">ボタン</button> <div id="data" style="display:none"> データ </div>
- ベストアンサー
- JavaScript
- カテゴリページ内 複数タブ
wordpressでサイト作っています idの番号を変えることで１ページ内に#numの連番で複数タブを置ける様にはしたのですが、 while文のなかで番号に連番を振るやり方がわかりません。 初心者ですいませんが、よろしくお願いします <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/ … <script type="text/javascript"> $.hoge = function( target ) { //Default Action target.find(".tab_content").hide(); //Hide all content target.find("ul.tabs li:first").addClass("active").show(); //Activate first tab target.find(".tab_content:first").show(); //Show first tab content //On Click Event target.find("ul.tabs li").click(function() { target.find("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab target.find(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content activeTab = activeTab.replace( '#', '.' ); target.find(activeTab).fadeIn(); //Fade in the active content return false; }); }// $.hoge // -------------------------------------- $(function() { $.hoge( $('#num1') ); $.hoge( $('#num2') ); }); </script> </head> <body> <div id="num1" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> <div id="num2" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- jquery教えて下さい。
現在、 <script type="text/javascript"> $(function(){ $("#btn1","#test2").click(function () { $("div","#test2").slideDown(3000); }); }); </script> のコードで btn1のidボタン▼をクリックすると test2がslidedownするコードを造っているのですが これをボタンを押さずに ページがひらいたと同時にスライドするにはどのように すればよろしいでしょうか？ 宜しくお願いします。 <div id="test2"> <div style="display:none;"><div class="slide"> <ul> <li class="setsumei1">test1</li> <li class="setsumei1">test2</li> <li class="setsumei1">test3</li> <li class="setsumei1">test4</li> </ul> </div></div> <div id="btn1">▼</div> </div>
- ベストアンサー
- JavaScript
- jQueryでshow/hideが上手く行かない
入力フィールドとボタンを作成し、ボタンを押すたびに入力フィールドが表示・非表示を繰り返すようにしたいと思っています。 入力フィールドが表示されているときにはボタンは"hide"、非表示の時は"show"が表示されている仕様です。 <div id="input"><input type="text" name="something"></div> <input type="button" id="button" value="hide"> 以下のようにjQueryを組んでみました。 $(document).ready(function(){ if($("#button").attr("value") == "hide"){ $("#button").click(function(){ alert("VALUE=" + $("#button").attr("value")), $("#input").children().hide(), $("#button").attr("value", "show"); }); } else if($("#button").attr("value") == "show"){ $("#button").click(function(){ alert("VALUE=" + $("#button").attr("value")), $("#input").children().show(), $("#button").attr("value", "hide"); }); } }); まず、hideボタンを押すとhideのアラートが出てフィールドが非表示になり、showというボタンのみが残ります。 次にshowボタンを押すと、showのアラートは表示されますが、フィールドが再表示されず、ボタンもshowのままです。 elseのalertまで行っているのにその後が機能しないのは何故でしょうか？
- ベストアンサー
- JavaScript
お礼
jQueryのセレクタが文字列であると言うことがわかって 変数を使ってのコーディングの幅が非常に広がりました。 ありがとうございます。