1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>Jquery选择器练习产品筛选</title> 6 <style> 7 ul{ 8 width: 500px; 9 height: 200px; 10 border: 1px solid #ccc; 11 } 12 ul li{ 13 width: 100px; 14 margin: 10px; 15 border:1px solid #ccc; 16 text-align: center; 17 float: left; 18 list-style:none; 19 20 } 21 .contains{ 22 color: red; 23 } 24 .show{ 25 width: 500px; 26 height: 50px; 27 } 28 .show span{ 29 margin-left:200px; 30 background-color: #ccc; 31 padding: 5px; 32 } 33 34 </style> 35 <script src="jquery-1.10.2.min.js" type="text/javascript"> 36 </script> 37 <script> 38 $(document).ready( 39 function(){ 40 var $btn=$(".show span"); 41 var $categroy=$("ul li:gt(5):not(:last)");/*:gt(5)获取索引值大于5的元素而且不是最后一个元素*/ 42 $categroy.hide(); 43 $btn.click(function(){ 44 if($categroy.is(":visible")){ /*如果categroy的值为显示时*/ 45 $categroy.hide(); 46 $("ul li").removeClass("contains"); 47 $btn.text("显示所有产品"); 48 49 } 50 else{ 51 $categroy.show(); 52 $("ul li").filter(":contains('佳能'),:contains('索尼')").addClass("contains"); /*filter(":内容")筛选索引中包含内容值相等的元素*/ 53 $btn.text("精选产品");/*修改btn的文本内容*/ 54 return false; /*超链接不跳转*/ 55 } 56 }); 57 }); 58 59 </script> 60 </head> 61 <body> 62 <ul> 63 <li>佳能</li> 64 <li>索尼</li> 65 <li>尼康</li> 66 <li>富士</li> 67 <li>爱国者</li> 68 <li>松下</li> 69 <li>柯达</li> 70 <li>三星</li> 71 <li>宾得</li> 72 <li>柯达</li> 73 <li>三星</li> 74 <li>宾得</li> 75 76 77 <li>其他品牌</li> 78 79 </ul> 80 <div class="show"> 81 <span>显示全部品牌</span> 82 </div> 83 84 </body> 85 </html>
效果
Jquery选择器练习产品筛选
- 佳能
- 索尼
- 尼康
- 富士
- 爱国者
- 松下
- 柯达
- 三星
- 宾得
- 柯达
- 三星
- 宾得
- 其他品牌
显示全部品牌