- ベストアンサー
jQueryの絞り込み検索について
- jQueryを使って条件ボタンを選択し、合致した画像が表示されるページを作成したいです。
- サンプルAでは、最初に全ての条件が押下されており、不要な条件をクリックしていく方式です。
- サンプルBでは、一つの条件で絞り込みを行い、別の条件をクリックすると前の条件が解除されます。
- koma04
- お礼率66% (2/3)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
（No.1から） ---- <body> <h1>jQuery Filtering</h1> <div id="container"> <div id="filter"> <a href="javascript:void(0);" class="allitem">ALL</a> | <a href="javascript:void(0);" class="hideall">HIDE ALL</a> | <a href="javascript:void(0);" class="cat">CAT</a> | <a href="javascript:void(0);" class="food">FOOD</a> | <a href="javascript:void(0);" class="view">VIEW</a> | <a href="javascript:void(0);" class="flower">FLOWER</a> </div> <div id="filterlist"> <ul> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat1.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view1.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food1.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat2.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat3.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="flower"><a href="#"><img src="img/flower1.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat4.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view2.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food2.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view3.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food3.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat5.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat6.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food4.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view4.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat7.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food5.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat8.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="flower"><a href="#"><img src="img/flower2.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view5.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat9.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food6.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat10.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view6.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat11.jpg" alt="" /></a></li> </ul> </div> </div><!--/#container--> <h2>COPYRIGHT © <a href="http://black-flag.net/">BLACKFLAG.NET</a> ALL RIGHTS RESERVED.</h2> <div class="tdftdiv"><ul class="tdftad"><li>[PR]<a href="http://design.ria10.com/" target="_top">Web Design</a></li></ul></div></body> </html> ---- 以上。 でも元々ちょっと問題があるスクリプトですけどね。。。
その他の回答 (1)
- ixkaito
- ベストアンサー率69% (18/26)
Aのindex2.htmlとでもして、同じ階層においてください。 ---- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jQuery Filtering</title> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link rel="stylesheet" type="text/css" href="css/screen.css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $setFilter = $('#filter'), $setList = $('#filterlist'), $setFilterAll = $('.allitem'), $hideAll = $('.hideall'); var showFade = 1500, showShut = 1500, hideFade = 1000, hideShut = 1000; var $setFilterBtn = $setFilter.children('a'), $setFilterList = $setList.children('ul').children('li'), $filterAllItem = $setFilterAll.attr('class'); $setFilterBtn.click(function(){ if(!$(this).hasClass('active')){ var filterClass = $(this).attr('class'); $setFilterList.each(function(){ if($(this).hasClass(filterClass)){ $(this).css({display:'block'}); $(this).find('*').stop().animate({opacity:'1'},showFade); $(this).stop().animate({width:'100px'},showShut); } }); $(this).addClass('active'); } else { $(this).removeClass('active'); var filterClass = $(this).attr('class'); $setFilterList.each(function(){ if($(this).hasClass(filterClass)){ $(this).find('*').stop().animate({opacity:'0'},hideFade); $(this).stop().animate({width:'0'},hideShut,function(){ $(this).css({display:'none'}); }); } }); } }); $setFilterAll.click(function(){ $setFilterBtn.addClass('active'); $setFilterList.each(function(){ $(this).css({display:'block'}); $(this).find('*').stop().animate({opacity:'1'},showFade); $(this).stop().animate({width:'100px'},showShut); }); }); $hideAll.click(function(){ $setFilterBtn.removeClass('active'); $setFilterList.each(function(){ $(this).find('*').stop().animate({opacity:'0'},hideFade); $(this).stop().animate({width:'0'},hideShut,function(){ $(this).css({display:'none'}); }); }); }) }); </script> <link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/services/homepage/commercial.css" /></head> ---- （No.2へ続く）
お礼
お返事送れて申し訳ありません。 やあ！やりたかったことが出来ました。 ご丁寧にソース全部書いてくださってありがとうございます。 助かりました！！ 本当にほんとうにありがとうございました。 このまま使わせていただきますｍｍ