用jQuery的$()封裝函數實現數組元素分頁效果

來源:互聯網
上載者:User

文章簡介:jQuery封裝函數來實現數組元素分頁效果的優勢。

  用jQuery的$()封裝函數來實現數組元素分頁效果的優勢

  最近一周在做中文站搜尋禮品widget的需求,這個需求中有一個分頁的功能;具體demo可以參見下圖:

  

  (如上圖,寬屏模式,1180下,每頁3個offer)

  對應的js應用檔案是同一個,頁面中後面的offer資料已經埋好了,只是啟用了css display:none樣式把後面的offer元素隱藏了。現在要求對已存在的頁面元素實現上下分頁效果,也就是頁面元素總集可以通過$(.class)獲得,然後來實現分頁功能。

  按照傳統的一般做法,用jQuery可寫成如下:

  var total=$(.class).length; //取得需要分頁的元素的總個數

  var radio=3;//根據寬窄屏獲得每頁顯示offer條數:

  var pageSize=parseInt(total/radio); //獲得總頁數;

  if(total % radio !=0){

  pageSize+=1;

  }

  var currentPage=1; //當前頁為第一頁

  //向前翻頁的代碼:

  $(.leftArrow,parentElem).bind("click",function(e){

  var index=currentPage-1;

  if(currentPage==1){

  return;

  }else{

  $(.class).css("display","none");

  var elemIndex=index*radio; //數組中起始要顯示的元素的指標

  $(.class).eq(elemIndex).css("display","");

  $(.class).eq(elemIndex+1).css("display","");

  $(.class).eq(elemIndex+2).css("display","");

  //上面三句代碼可用next()重寫成

  //$(.class).eq(elemIndex).css("display","")

  // .next().css("display","")

  // .next()..css("display","");

  currentPage=index;

  }

  })

  //向後翻頁的代碼:

  $(.rightArrow,parentElem).bind("click",function(e){

  var index=currentPage+1;

  if(currentPage==pageSize){

  return;

  }else{

  $(.class).css("display","none");

  var elemIndex=index*radio; //數組中起始要顯示的元素的指標

  $(.class).eq(elemIndex).css("display","");

  $(.class).eq(elemIndex+1).css("display","");

  $(.class).eq(elemIndex+2).css("display","");

  //上面三句代碼可用next()重寫成

  //$(.class).eq(elemIndex).css("display","")

  // .next().css("display","")

  // .next()..css("display","");

  currentPage=index;

  }

  })

  大家發現沒有,在向後翻頁的代碼中,無論最後一頁只有1條offer,2條offer,還是全部3條offer,我都用同樣的代碼,不做任何判斷

  $(.class).eq(elemIndex).css(‘display’,”);

  $(.class).eq(elemIndex+1).css(‘display’,”);

  $(.class).eq(elemIndex+2).css(‘display’,”);

  這3條語句連續調用。

  也就是說,elemIndex有可能越界,即elemIndex>$(.class).length,即使在這樣的情況下,$(.class).eq(elemIndex+1).css(‘display’,”)照樣沒有問題,瀏覽器不會報錯,js照常執行,最終結果照樣能完美展示。這要感謝jQuery的封裝函數產生的juery對象,如果elemIndex>=$(.class).length,$(.class).eq(elemIndex+1)返回的是一個空jquery元素對象,雖然它沒有對應到DOM中的元素,但它還是一個jQuery對象,因此調用.css()方法不會出錯,雖然頁面沒有任何變化效果;

  通過這個例子,就能夠理解為什麼jQuey對不匹配的元素仍然返回jQuery Object,而不是null,這種思想對數組分頁操作來說,提供了極大的便利性,因為避免了數組索引越界引起程式錯誤,導致js中斷執行的情況,簡化了分頁代碼中大量的數組索引越界判斷。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。