jQuery_練習一個前端“換一換”功能
需求的極簡概要:實現“換一換”按鈕的功能,點擊之后,換另一批對應的品牌
剛開始的時候考慮使用ajax請求數據,之后通過js在頁面上填充到指定位置,但是真是懶得給這個ajax請求單獨再配一個請求映射了,干脆直接在后臺把需要的內容全部拼成JSON字符串,直接在前臺解析,分頁。
頁面比較簡單,就不上html代碼了,大概思路就是:兩個“換一換”按鈕分別對應兩套數據,共用一個分頁的方法,分別傳入各自的頁數,顯示對應頁數的內容。當然了,實現“換一換”的方法多種多樣,我在此只是記錄一下自己的思路,歡迎批評指教,拍磚輕拍,愛護新人,3Q。
節約口水,直接上代碼~
1 $(function(){
2
3 //“換一換”功能家居,雜貨點擊計數器
4 var jiajubrandCount = 0;
5 var zahuobrandCount = 0;
6
7 //初始化家居品牌內容
8 jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
9 //初始化雜貨品牌內容
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:計數
26 function ClickToChangeBrand(container,valSrc,brandCount){
27
28 //$("#" + container).empty();//清空既存內容
29 var s = $("#" + valSrc).val(); //取得品牌所有數據
30 var obj = $.parseJSON(s.toString());//轉換為JSON
31 var totalCount = obj.length;//總記錄數
32 var perPageCount = 20;//預定每頁顯示數
33 var pageCount = 0;//總頁數
34 var actualPerPageCount = 0;//實際每頁的顯示數
35 var strTotal = "";//待打印內容的緩沖變量
36
37 var tempRs = totalCount%perPageCount;//根據實際品牌數計算總頁數
38 if(tempRs!=0){
39 pageCount = parseInt(totalCount/perPageCount) + 1;
40 }
41 else{
42 pageCount = parseInt(totalCount/perPageCount);
43 }
44
45 //取實際每次需要顯示的記錄數,若最后一頁不足一頁的
46 if(brandCount * perPageCount + perPageCount > totalCount){
47 actualPerPageCount = totalCount - brandCount * perPageCount;
48 }
49 else{
50 actualPerPageCount = perPageCount;
51 }
52
53 /* alert("計數器:"+brandCount);
54 alert("實際每頁數:"+actualPerPageCount);
55 alert("預定每頁數:"+perPageCount);
56 alert("總頁數:"+ pageCount); */
57
58 //獲取當前頁的內容
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 //計數器大于等于頁數的時候歸零
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 });
2
3 //“換一換”功能家居,雜貨點擊計數器
4 var jiajubrandCount = 0;
5 var zahuobrandCount = 0;
6
7 //初始化家居品牌內容
8 jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
9 //初始化雜貨品牌內容
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:計數
26 function ClickToChangeBrand(container,valSrc,brandCount){
27
28 //$("#" + container).empty();//清空既存內容
29 var s = $("#" + valSrc).val(); //取得品牌所有數據
30 var obj = $.parseJSON(s.toString());//轉換為JSON
31 var totalCount = obj.length;//總記錄數
32 var perPageCount = 20;//預定每頁顯示數
33 var pageCount = 0;//總頁數
34 var actualPerPageCount = 0;//實際每頁的顯示數
35 var strTotal = "";//待打印內容的緩沖變量
36
37 var tempRs = totalCount%perPageCount;//根據實際品牌數計算總頁數
38 if(tempRs!=0){
39 pageCount = parseInt(totalCount/perPageCount) + 1;
40 }
41 else{
42 pageCount = parseInt(totalCount/perPageCount);
43 }
44
45 //取實際每次需要顯示的記錄數,若最后一頁不足一頁的
46 if(brandCount * perPageCount + perPageCount > totalCount){
47 actualPerPageCount = totalCount - brandCount * perPageCount;
48 }
49 else{
50 actualPerPageCount = perPageCount;
51 }
52
53 /* alert("計數器:"+brandCount);
54 alert("實際每頁數:"+actualPerPageCount);
55 alert("預定每頁數:"+perPageCount);
56 alert("總頁數:"+ pageCount); */
57
58 //獲取當前頁的內容
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 //計數器大于等于頁數的時候歸零
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 });
posted on 2014-11-25 21:09 都較瘦 閱讀(3669) 評論(4) 編輯 收藏 所屬分類: Jquery案例積累