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     });

          posted on 2014-11-25 21:09 都較瘦 閱讀(3673) 評論(4)  編輯  收藏 所屬分類: Jquery案例積累

          評論

          # re: jQuery_練習一個前端“換一換”功能 2015-04-22 09:56 戴俊杰

          我想做一個像京東的商品換一換  回復  更多評論   

          # re: jQuery_練習一個前端“換一換”功能 2015-05-10 10:39 都較瘦

          @戴俊杰
          給個鏈接吧,看看是什么樣的  回復  更多評論   

          # re: jQuery_練習一個前端“換一換”功能[未登錄] 2016-05-23 11:17

          能否給個完整的呢  回復  更多評論   

          # re: jQuery_練習一個前端“換一換”功能 2016-05-30 18:22 都較瘦

          @王
          啊,還有什么需要補充的嗎  回復  更多評論   

          <2016年5月>
          24252627282930
          1234567
          891011121314
          15161718192021
          22232425262728
          2930311234

          導航

          統計

          公告

          博客定位:囿于目前的水平,博客定位在記錄自己的學習心得和隨手的練習

          常用鏈接

          留言簿

          隨筆分類

          隨筆檔案

          文章分類

          文章檔案

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 西峡县| 连州市| 津市市| 岑巩县| 余江县| 肥东县| 长阳| 大兴区| 白山市| 岑巩县| 昭通市| 峨山| 文山县| 马山县| 措勤县| 张掖市| 水城县| 融水| 清镇市| 黄梅县| SHOW| 威宁| 南阳市| 科技| 瓮安县| 巴林左旗| 通榆县| 六盘水市| 宝山区| 桂林市| 基隆市| 仙居县| 古蔺县| 奇台县| 崇义县| 临沂市| 宜州市| 佛冈县| 恩平市| 麻江县| 全州县|