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

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

    <2015年5月>
    262728293012
    3456789
    10111213141516
    17181920212223
    24252627282930
    31123456

    導航

    統計

    公告

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

    常用鏈接

    留言簿

    隨筆分類

    隨筆檔案

    文章分類

    文章檔案

    搜索

    最新評論

    閱讀排行榜

    評論排行榜

    主站蜘蛛池模板: 免费a级毛片高清视频不卡 | 在人线av无码免费高潮喷水| 久久夜色精品国产亚洲| 高潮毛片无遮挡高清免费视频| 成人黄动漫画免费网站视频| 亚洲综合伊人制服丝袜美腿| 国内精品乱码卡1卡2卡3免费| 亚洲伊人久久大香线蕉在观 | 在线观看国产情趣免费视频| 亚洲熟女www一区二区三区| 免费涩涩在线视频网| 精品女同一区二区三区免费播放| 国产免费观看网站| 草久免费在线观看网站| 亚洲午夜久久久影院伊人| 国产亚洲免费的视频看| 老汉色老汉首页a亚洲| 国产四虎免费精品视频| 亚洲男人天堂2018av| 蜜桃精品免费久久久久影院 | 久久国产精品免费专区| 亚洲欧洲自拍拍偷综合| 最近中文字幕无吗免费高清| 视频一区二区三区免费观看| 亚洲男同帅GAY片在线观看| 国产好大好硬好爽免费不卡| 亚洲国产成人精品电影| 国产精品免费看香蕉| 中文字幕久无码免费久久| 久久亚洲熟女cc98cm| 四虎成人免费网站在线| 一个人免费播放在线视频看片| 久久精品7亚洲午夜a| 国产精品无码免费播放| 深夜a级毛片免费视频| 亚洲AV无码成人网站久久精品大 | 亚洲国产天堂久久综合| 无码中文字幕av免费放dvd| 亚洲无mate20pro麻豆| 精品亚洲成α人无码成α在线观看| 日韩内射激情视频在线播放免费|