基於jquery的頁面程式碼的優化

flzhang發表於2014-09-26
jQuery優化
高亮顯示，選中的文字連結
 顯示效果如下
預設  選擇“通知公告”效果 通知公告 學院動態 行業動態
      選擇“學院動態”效果 通知公告 學院動態 行業動態
      選擇“行業動態”效果 通知公告 學院動態 行業動態
 1）html如下

    通知公告  
 
 
    學院動態  

 
行業動態   
 2）新建js檔案控制html class顯示時機，比如 在選中"學院動態" 設定class裡的樣式是alxx_text01，而其他兩個選項的
樣式是 alxx_text02
具體js寫法
   $("#select1").click(function(e) {
    $("#select1_span").attr(class,"alxx_text01") ;
     $("#select2_span").attr(class,"alxx_text02") ;
     $("#select3_span").attr(class,"alxx_text02") ;   

  });
  $("#select2").click(function(e) {
    $("#select1_span").attr(class,"alxx_text02") ;
     $("#select2_span").attr(class,"alxx_text01") ;
     $("#select3_span").attr(class,"alxx_text02") ;                
  });
  $("#select3").click(function(e) {
     $("#select1_span").attr(class,"alxx_text02") ;
     $("#select2_span").attr(class,"alxx_text02") ;
     $("#select3_span").attr(class,"alxx_text01") ;

  });
這樣寫程式碼冗餘，不易維護，因此從集中的全域性角度出發，修改上述程式碼簡化程式碼寫法變為
   var menus = $('.alxx_divt01 .alxx_text02, .alxx_divt01 .alxx_text01');//先找到div下面   menus.find('a').click(function(e) { //找到樣式對應的標籤
  menus.removeClass().addClass('alxx_text02');//先把所有相關樣式都設定成非高亮顯示的css
  var current = $(e.target).parent();//e.target是當前事件的事件源，即
  current.removeClass().addClass('alxx_text01');//設定當前選中的span的樣式是高亮顯示的css
  });
根據上述程式碼可以大大簡化程式碼的冗餘，也利於程式碼的擴充套件，如果頁面上選項增加，根據修優化後的程式碼可以直接應對，不用反覆修改

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/750077/viewspace-1281937/，如需轉載，請註明出處，否則將追究法律責任。

相關文章