快捷導(dǎo)航

jQuery教程 $()包裝函數(shù)來(lái)實(shí)現(xiàn)數(shù)組元素分頁(yè)效果

更新時(shí)間：2013年08月13日 11:55:39 作者：

最近一周在做中文站搜索禮品widget的需求，這個(gè)需求中有一個(gè)分頁(yè)的功能

最近一周在做中文站搜索禮品widget的需求，這個(gè)需求中有一個(gè)分頁(yè)的功能；具體demo可以參見(jiàn)下圖：

對(duì)應(yīng)的js應(yīng)用文件是同一個(gè)，頁(yè)面中后面的offer數(shù)據(jù)已經(jīng)埋好了，只是啟用了css display:none樣式把后面的offer元素隱藏了?，F(xiàn)在要求對(duì)已存在的頁(yè)面元素實(shí)現(xiàn)上下分頁(yè)效果，也就是頁(yè)面元素總集可以通過(guò)$(.class)獲得，然后來(lái)實(shí)現(xiàn)分頁(yè)功能。

按照傳統(tǒng)的一般做法，用jQuery可寫(xiě)成如下:

復(fù)制代碼代碼如下:

var total=$(.class).length; //取得需要分頁(yè)的元素的總個(gè)數(shù)
var radio=3;//根據(jù)寬窄屏獲得每頁(yè)顯示offer條數(shù)：
var pageSize=parseInt(total/radio); //獲得總頁(yè)數(shù)；
if(total % radio !=0)｛
   pageSize+=1;  
}
var currentPage=1;  //當(dāng)前頁(yè)為第一頁(yè)
//向前翻頁(yè)的代碼：
$(.leftArrow,parentElem).bind('click',function(e){
var index=currentPage-1;
   if(currentPage==1){
     return;
   }else{
      $(.class).css('display','none');
      var elemIndex=index*radio; //數(shù)組中起始要顯示的元素的指針
       $(.class).eq(elemIndex).css('display','');
        $(.class).eq(elemIndex+1).css('display','');
        $(.class).eq(elemIndex+2).css('display','');
        //上面三句代碼可用next（）重寫(xiě)成   
        //$(.class).eq(elemIndex).css('display','')
        //  .next().css('display','')
        //  .next()..css('display','');     
    currentPage=index;
   }
})
//向后翻頁(yè)的代碼：
$(.rightArrow,parentElem).bind('click',function(e){
var index=currentPage+1;
   if(currentPage==pageSize){
     return;
   }else{
      $(.class).css('display','none');
      var elemIndex=index*radio; //數(shù)組中起始要顯示的元素的指針      
        $(.class).eq(elemIndex).css('display','');
        $(.class).eq(elemIndex+1).css('display','');
        $(.class).eq(elemIndex+2).css('display','');
       //上面三句代碼可用next（）重寫(xiě)成   
        //$(.class).eq(elemIndex).css('display','')
        //  .next().css('display','')
        //  .next()..css('display','');  
    currentPage=index;
   }
})

大家發(fā)現(xiàn)沒(méi)有，在向后翻頁(yè)的代碼中，無(wú)論最后一頁(yè)只有1條offer,2條offer,還是全部3條offer，我都用同樣的代碼，不做任何判斷

復(fù)制代碼代碼如下:

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

這3條語(yǔ)句連續(xù)調(diào)用。

也就是說(shuō)，elemIndex有可能越界，即elemIndex>$(.class).length，即使在這樣的情況下，$(.class).eq(elemIndex+1).css('display',")照樣沒(méi)有問(wèn)題，瀏覽器不會(huì)報(bào)錯(cuò)，js照常執(zhí)行，最終結(jié)果照樣能完美展示。這要感謝jQuery的包裝函數(shù)產(chǎn)生的juery對(duì)象,如果elemIndex>=$(.class).length,$(.class).eq(elemIndex+1)返回的是一個(gè)空jquery元素對(duì)象，雖然它沒(méi)有對(duì)應(yīng)到DOM中的元素，但它還是一個(gè)jQuery對(duì)象，因此調(diào)用.css()方法不會(huì)出錯(cuò)，雖然頁(yè)面沒(méi)有任何變化效果；

通過(guò)這個(gè)例子，就能夠理解為什么jQuey對(duì)不匹配的元素仍然返回jQuery Object,而不是null,這種思想對(duì)數(shù)組分頁(yè)操作來(lái)說(shuō)，提供了極大的便利性，因?yàn)楸苊饬藬?shù)組索引越界引起程序錯(cuò)誤，導(dǎo)致js中斷執(zhí)行的情況，簡(jiǎn)化了分頁(yè)代碼中大量的數(shù)組索引越界判斷。

您可能感興趣的文章: