需求的極簡概要：實現(xiàn)“換一換”按鈕的功能，點擊之后，換另一批對應的品牌
剛開始的時候考慮使用ajax請求數(shù)據(jù)，之后通過js在頁面上填充到指定位置，但是真是懶得給這個ajax請求單獨再配一個請求映射了，干脆直接在后臺把需要的內(nèi)容全部拼成JSON字符串，直接在前臺解析，分頁。
頁面比較簡單，就不上html代碼了，大概思路就是：兩個“換一換”按鈕分別對應兩套數(shù)據(jù)，共用一個分頁的方法，分別傳入各自的頁數(shù)，顯示對應頁數(shù)的內(nèi)容。當然了，實現(xiàn)“換一換”的方法多種多樣，我在此只是記錄一下自己的思路，歡迎批評指教，拍磚輕拍，愛護新人，3Q。
節(jié)約口水，直接上代碼~
1 $(
function(){
2 3 //“換一換”功能家居，雜貨點擊計數(shù)器
4 var jiajubrandCount = 0;
5 var zahuobrandCount = 0;
6 7 //初始化家居品牌內(nèi)容
8 jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
9 //初始化雜貨品牌內(nèi)容
10 zahuobrandCount = ClickToChangeBrand("zahuobrand","zahuobrandval",zahuobrandCount);
11 12 //家居換一換點擊
13 $("#jiajuBrandChange").click(
function(){
14 jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
15 });
16 17 //雜貨換一換點擊
18 $("#zahuoBrandChange").click(
function(){
19 zahuobrandCount = ClickToChangeBrand("zahuobrand","zahuobrandval",zahuobrandCount);
20 });
21 22 //品牌“換一換”功能
23 //container:目標容器
24 //valSrc:值存放的容器
25 //brandCount:計數(shù)
26 function ClickToChangeBrand(container,valSrc,brandCount){
27 28 //$("#" + container).empty();//清空既存內(nèi)容
29 var s = $("#" + valSrc).val();
//取得品牌所有數(shù)據(jù)
30 var obj = $.parseJSON(s.toString());
//轉(zhuǎn)換為JSON
31 var totalCount = obj.length;
//總記錄數(shù)
32 var perPageCount = 20;
//預定每頁顯示數(shù)
33 var pageCount = 0;
//總頁數(shù)
34 var actualPerPageCount = 0;
//實際每頁的顯示數(shù)
35 var strTotal = "";
//待打印內(nèi)容的緩沖變量
36 37 var tempRs = totalCount%perPageCount;
//根據(jù)實際品牌數(shù)計算總頁數(shù)
38 if(tempRs!=0){
39 pageCount = parseInt(totalCount/perPageCount) + 1;
40 }
41 else{
42 pageCount = parseInt(totalCount/perPageCount);
43 }
44 45 //取實際每次需要顯示的記錄數(shù)，若最后一頁不足一頁的
46 if(brandCount * perPageCount + perPageCount > totalCount){
47 actualPerPageCount = totalCount - brandCount * perPageCount;
48 }
49 else{
50 actualPerPageCount = perPageCount;
51 }
52 53 /* alert("計數(shù)器:"+brandCount);
54 alert("實際每頁數(shù):"+actualPerPageCount);
55 alert("預定每頁數(shù):"+perPageCount);
56 alert("總頁數(shù)："+ pageCount); */57 58 //獲取當前頁的內(nèi)容
59 for(i = brandCount * perPageCount;i < brandCount * perPageCount + actualPerPageCount;i++){
60 //obj[i].title為顯示標題，obj[i].name為該品牌的類目id
61 strTotal += "<a href='' target='_blank'>" + obj[i].title + "</a>";
62 }
63 64 //計數(shù)器大于等于頁數(shù)的時候歸零
65 brandCount++;
66 if(brandCount>=pageCount){
67 brandCount = 0;
68 }
69 70 //淡出
71 $("#" + container).empty().append(strTotal).hide().stop(
true,
true).fadeIn("slow");
72 73 return brandCount;
74 }
75 });