一個類似京東商城那種多條件篩選效果

閑來無事，想做一個類似京東商城那種多條件篩選效果，京東效果如下：
 

由於對jquery的不熟悉，短短幾行代碼寫了一上午。慚愧。

另外，對jquery體會最深的一點是，可以通過很多種方法達到同樣的顯示效果，但是本質卻有着非常大的區別。例如：
通過".attr('class', 'seled')"和".addClass('seled')"都可以為選中的對象添加樣式，並且達到同樣的顯示效果，但是這兩種添加樣式的方法在"$("#filter a[class='seled']")"眼中卻是不一樣的。

廢話不多說，上代碼。

對了，由於不是美工，所以測試方面沒怎么在意，我選擇用的都是高版本的瀏覽器，Chrome 13.0.782.107 m、Firefox 5.0、IE9

HTML code

<! 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 >

JScript code

< script type = " text/javascript "  src = " Scripts/jquery-1.4.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 " );  // 為filter下的所有a標簽添加單擊事件  $( " #filter a " ).click( function  () { $( this ).parents( " dl " ).children( " dd " ).each( function  () { $( this ).children( " div " ).children( " a " ).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>

另外，還有一些疑問，請大家幫忙解答：
請結合html看看下面代碼：
$(this).parents("dl").children("dd").each(function () {
$(this).children("div").children("a").removeClass("seled");
});

$(this)獲取到的是a標簽，通過.parents()方法和提供的"dl"參數，可以訪問到a標簽的父節點的父節點……，那為什么沒有childrens()方法呢（注意后面跟了s）？還有看看這行代碼，$(this).children("div").children("a").removeClass("seled");簡直丑死了，用了幾個children()方法，有人能將上面一段代碼幫我改改嗎？？

謝了！


確實是可以。將
$(this).children("div").children("a").removeClass("seled");
換成
$(this).find("a").removeClass("seled");
代碼看上去漂亮多了。。

謝啦！