JQuery練習——仿京東商城多條件篩選
阿新 • • 發佈：2019-01-28
京東效果圖：
程式碼效果圖：
HTML結構及CSS樣式：
<!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"> <head> <title>360buy多條件篩選</title> <style type="text/css"> #filter { width:620px; height:auto; margin-left:auto; margin-right:auto; font-size:12px; } #filter dl { padding:0; margin-top:0; margin-bottom:0; clear:both; padding:4px 0; } #filter dt,dd { display:block; float:left; width:auto; padding:0; margin:3px 0; } #filter dt { height:14px; padding-bottom:4px; font-weight:bold; color:#333333; } #filter dd { color:#005AA0; margin-right:8px; } #filter a { cursor:pointer; } .seling { background-color:#005AA0; color:#FFFFFF; } .seled { background-color:#005AA0; color:#FFFFFF; } </style> </head> <body> <div id="filter"> <dl> <dt>品牌：</dt> <dd><div><a>全部</a></div></dd> <dd><div><a>惠普(hp)</a></div></dd> <dd><div><a>聯想(Lenovo)</a></div></dd> <dd><div><a>聯想(ThinkPad)</a></div></dd> <dd><div><a>巨集基(acer)</a></div></dd> <dd><div><a>華碩</a></div></dd> <dd><div><a>戴爾</a></div></dd> <dd><div><a>三星</a></div></dd> <dd><div><a>索尼</a></div></dd> <dd><div><a>東芝</a></div></dd> <dd><div><a>Gateway</a></div></dd> <dd><div><a>微星</a></div></dd> <dd><div><a>海爾</a></div></dd> <dd><div><a>清華同方</a></div></dd> <dd><div><a>富士通</a></div></dd> <dd><div><a>蘋果(Apple)</a></div></dd> <dd><div><a>神舟</a></div></dd> <dd><div><a>方正</a></div></dd> <dd><div><a>優雅</a></div></dd> </dl> <dl> <dt>價格：</dt> <dd><div><a>全部</a></div></dd> <dd><div><a>1000-2999</a></div></dd> <dd><div><a>3000-3499</a></div></dd> <dd><div><a>3500-3999</a></div></dd> <dd><div><a>4000-4499</a></div></dd> <dd><div><a>4500-4999</a></div></dd> <dd><div><a>5000-5999</a></div></dd> <dd><div><a>6000-6999</a></div></dd> <dd><div><a>7000-9999</a></div></dd> <dd><div><a>10000以上</a></div></dd> </dl> <dl> <dt>尺寸：</dt> <dd><div><a>全部</a></div></dd> <dd><div><a>8.9英寸及以下</a></div></dd> <dd><div><a>11英寸</a></div></dd> <dd><div><a>12英寸</a></div></dd> <dd><div><a>13英寸</a></div></dd> <dd><div><a>14英寸</a></div></dd> <dd><div><a>15英寸</a></div></dd> <dd><div><a>16英寸-17英寸</a></div></dd> </dl> <dl> <dt>平臺：</dt> <dd><div><a>全部</a></div></dd> <dd><div><a>AMD Brazos APU平臺</a></div></dd> <dd><div><a>Intel Sandy Bridge平臺</a></div></dd> <dd><div><a>Intel平臺</a></div></dd> <dd><div><a>AMD平臺</a></div></dd> </dl> <dl> <dt>顯示卡：</dt> <dd><div><a>全部</a></div></dd> <dd><div><a>獨立顯示卡</a></div></dd> <dd><div><a>整合顯示卡</a></div></dd> <dd><div><a>核芯顯示卡</a></div></dd> </dl> </div> </body> </html>
Javascript程式碼：
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function () { //選中filter下的所有a標籤，為其新增hover方法，該方法有兩個引數，分別是滑鼠移上和移開所執行的函式。 $("#filter a").hover( function () { $(this).addClass("seling"); }, function () { $(this).removeClass("seling"); } ); //選中filter下所有的dt標籤，並且為dt標籤後面的第一個dd標籤下的a標籤新增樣式seled。(感嘆jquery的強大) $("#filter dt+dd a").attr("class", "seled"); /*注意：這兒應該是設定(attr)樣式，而不是新增樣式(addClass)， 不然後面通過$("#filter a[class='seled']")訪問不到class樣式為seled的a標籤。*/ //為filter下的所有a標籤新增單擊事件 $("#filter a").click(function () { $(this).parents("dl").children("dd").each(function () { //下面三種方式效果相同（第三種寫法的內部就是呼叫了find()函式，所以，第二、三種方法是等價的。） //$(this).children("div").children("a").removeClass("seled"); //$(this).find("a").removeClass("seled"); $('a',this).removeClass("seled"); }); $(this).attr("class", "seled"); alert(RetSelecteds()); //返回選中結果 }); alert(RetSelecteds()); //返回選中結果 }); function RetSelecteds() { var result = ""; $("#filter a[class='seled']").each(function () { result += $(this).html()+"\n"; }); return result; } </script>
關於此文帖子