<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 都較瘦

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

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

    導航

    統計

    公告

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

    常用鏈接

    留言簿

    隨筆分類

    隨筆檔案

    文章分類

    文章檔案

    搜索

    最新評論

    閱讀排行榜

    評論排行榜

    主站蜘蛛池模板: 久久精品亚洲日本佐佐木明希| 亚洲无av在线中文字幕| 亚洲精品视频免费看| 久久免费公开视频| 亚洲AV无码国产精品色午友在线 | 岛国岛国免费V片在线观看| 亚洲高清国产拍精品青青草原 | 亚洲av日韩av不卡在线观看| 免费日本一区二区| 91大神亚洲影视在线| 91精品导航在线网址免费| 亚洲一区二区三区无码国产| 无码日韩精品一区二区免费| 亚洲日韩一区二区三区| 国产精品免费视频一区| 成人午夜免费视频| 亚洲精品乱码久久久久久中文字幕| 叮咚影视在线观看免费完整版 | 亚洲精品无码av人在线观看| 在线播放免费人成毛片乱码| 77777_亚洲午夜久久多人| 成人免费在线看片| 国产精品亚洲天堂| 亚洲日本va中文字幕久久| 69av免费视频| 理论秋霞在线看免费| 亚洲国产天堂久久综合网站| 日韩不卡免费视频| 成人免费网站视频www| 久久久久亚洲精品影视| 黄色成人网站免费无码av| 免费大片av手机看片高清| 亚洲人成网站在线播放影院在线| 国产人在线成免费视频| 猫咪免费人成在线网站| 在线观看亚洲人成网站| 国产一区视频在线免费观看 | 四虎国产精品免费永久在线| 亚洲免费福利视频| 不卡精品国产_亚洲人成在线| 永久黄色免费网站|