<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    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 都較瘦 閱讀(3669) 評論(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 都較瘦

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

    <2014年11月>
    2627282930311
    2345678
    9101112131415
    16171819202122
    23242526272829
    30123456

    導航

    統計

    公告

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

    常用鏈接

    留言簿

    隨筆分類

    隨筆檔案

    文章分類

    文章檔案

    搜索

    最新評論

    閱讀排行榜

    評論排行榜

    主站蜘蛛池模板: 免费一级国产生活片| 美女被羞羞网站免费下载| 亚洲精品一级无码鲁丝片| 美女裸身网站免费看免费网站| 99re6在线视频精品免费| 在线91精品亚洲网站精品成人| 亚洲国产成人久久精品app| 亚洲va久久久噜噜噜久久狠狠| 免费人成年轻人电影| 麻豆国产VA免费精品高清在线| 久久www免费人成看片| 欧洲人成在线免费| 国产免费播放一区二区| 日韩大片免费观看视频播放 | 亚洲熟妇无码八V在线播放| 久久精品亚洲一区二区三区浴池 | 国产精品小视频免费无限app| 亚洲欧洲免费无码| 亚洲国产最大av| 亚洲成人在线免费观看| 亚洲av日韩av无码| 亚洲国产另类久久久精品小说 | 日韩一级片免费观看| 亚洲AV性色在线观看| 色婷五月综激情亚洲综合| 亚洲第一成年网站大全亚洲| 国产亚洲婷婷香蕉久久精品| 亚洲日韩在线中文字幕第一页 | 免费人成大片在线观看播放| 国产精品亚洲va在线观看| 亚洲av永久中文无码精品| 亚洲欧美日韩综合俺去了| 亚洲精品无码永久在线观看男男| 亚洲欧美乱色情图片| 亚洲精品无码高潮喷水A片软| 亚洲欧美日韩中文无线码 | 国产精品视频全国免费观看| 丝瓜app免费下载网址进入ios| 久久久久久毛片免费看| 三级网站免费观看| 亚洲视频在线免费观看|