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

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

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

    jQuery_練習(xí)一個(gè)前端“換一換”功能

    需求的極簡(jiǎn)概要:實(shí)現(xiàn)“換一換”按鈕的功能,點(diǎn)擊之后,換另一批對(duì)應(yīng)的品牌

    剛開始的時(shí)候考慮使用ajax請(qǐng)求數(shù)據(jù),之后通過js在頁面上填充到指定位置,但是真是懶得給這個(gè)ajax請(qǐng)求單獨(dú)再配一個(gè)請(qǐng)求映射了,干脆直接在后臺(tái)把需要的內(nèi)容全部拼成JSON字符串,直接在前臺(tái)解析,分頁。

    頁面比較簡(jiǎn)單,就不上html代碼了,大概思路就是:兩個(gè)“換一換”按鈕分別對(duì)應(yīng)兩套數(shù)據(jù),共用一個(gè)分頁的方法,分別傳入各自的頁數(shù),顯示對(duì)應(yīng)頁數(shù)的內(nèi)容。當(dāng)然了,實(shí)現(xiàn)“換一換”的方法多種多樣,我在此只是記錄一下自己的思路,歡迎批評(píng)指教,拍磚輕拍,愛護(hù)新人,3Q。

    節(jié)約口水,直接上代碼~

     1 $(function(){
     2     
     3         //“換一換”功能家居,雜貨點(diǎn)擊計(jì)數(shù)器
     4         var jiajubrandCount = 0;
     5         var zahuobrandCount = 0;
     6         
     7         //初始化家居品牌內(nèi)容
     8         jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
     9         //初始化雜貨品牌內(nèi)容
    10         zahuobrandCount = ClickToChangeBrand("zahuobrand","zahuobrandval",zahuobrandCount);
    11         
    12         //家居換一換點(diǎn)擊
    13         $("#jiajuBrandChange").click(function(){
    14             jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
    15         });
    16         
    17         //雜貨換一換點(diǎn)擊
    18         $("#zahuoBrandChange").click(function(){
    19             zahuobrandCount = ClickToChangeBrand("zahuobrand","zahuobrandval",zahuobrandCount);
    20         });
    21 
    22         //品牌“換一換”功能
    23         //container:目標(biāo)容器
    24         //valSrc:值存放的容器    
    25         //brandCount:計(jì)數(shù)
    26         function ClickToChangeBrand(container,valSrc,brandCount){
    27             
    28             //$("#" + container).empty();//清空既存內(nèi)容
    29             var s = $("#" + valSrc).val(); //取得品牌所有數(shù)據(jù)
    30             var obj = $.parseJSON(s.toString());//轉(zhuǎn)換為JSON
    31             var totalCount = obj.length;//總記錄數(shù)
    32             var perPageCount = 20;//預(yù)定每頁顯示數(shù)
    33             var pageCount = 0;//總頁數(shù)
    34             var actualPerPageCount = 0;//實(shí)際每頁的顯示數(shù)
    35             var strTotal = "";//待打印內(nèi)容的緩沖變量
    36             
    37             var tempRs = totalCount%perPageCount;//根據(jù)實(shí)際品牌數(shù)計(jì)算總頁數(shù)
    38             if(tempRs!=0){
    39                 pageCount = parseInt(totalCount/perPageCount) + 1;
    40             }
    41             else{
    42                 pageCount = parseInt(totalCount/perPageCount);
    43             }
    44             
    45             //取實(shí)際每次需要顯示的記錄數(shù),若最后一頁不足一頁的
    46             if(brandCount * perPageCount + perPageCount > totalCount){
    47                 actualPerPageCount = totalCount - brandCount * perPageCount;
    48             }
    49             else{
    50                 actualPerPageCount = perPageCount;
    51             }
    52             
    53        /* alert("計(jì)數(shù)器:"+brandCount);
    54             alert("實(shí)際每頁數(shù):"+actualPerPageCount);
    55             alert("預(yù)定每頁數(shù):"+perPageCount);
    56             alert("總頁數(shù):"+ pageCount); */
    57             
    58             //獲取當(dāng)前頁的內(nèi)容
    59             for(i = brandCount * perPageCount;i < brandCount * perPageCount + actualPerPageCount;i++){
    60                 //obj[i].title為顯示標(biāo)題,obj[i].name為該品牌的類目id
    61                 strTotal += "<a href='' target='_blank'>" + obj[i].title + "</a>";
    62             }
    63             
    64             //計(jì)數(shù)器大于等于頁數(shù)的時(shí)候歸零
    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 都較瘦 閱讀(3676) 評(píng)論(4)  編輯  收藏 所屬分類: Jquery案例積累

    評(píng)論

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

    我想做一個(gè)像京東的商品換一換  回復(fù)  更多評(píng)論   

    # re: jQuery_練習(xí)一個(gè)前端“換一換”功能 2015-05-10 10:39 都較瘦

    @戴俊杰
    給個(gè)鏈接吧,看看是什么樣的  回復(fù)  更多評(píng)論   

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

    能否給個(gè)完整的呢  回復(fù)  更多評(píng)論   

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

    @王
    啊,還有什么需要補(bǔ)充的嗎  回復(fù)  更多評(píng)論   

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

    導(dǎo)航

    統(tǒng)計(jì)

    公告

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

    常用鏈接

    留言簿

    隨筆分類

    隨筆檔案

    文章分類

    文章檔案

    搜索

    最新評(píng)論

    閱讀排行榜

    評(píng)論排行榜

    主站蜘蛛池模板: 亚洲熟女乱综合一区二区| a视频在线免费观看| 九九免费久久这里有精品23| 亚洲熟妇AV一区二区三区浪潮| 亚洲成a人片毛片在线| 亚洲精品视频免费看| 亚洲高清视频免费| 亚洲精品国产第1页| 亚洲精品视频专区| 亚洲精品视频免费看| 亚洲一区中文字幕在线观看| 亚洲人成小说网站色| 亚洲日韩国产一区二区三区在线| 亚洲人成在久久综合网站| 亚洲福利一区二区| 中文字幕乱码亚洲精品一区 | 久久国产免费直播| 精选影视免费在线 | 国产成人AV免费观看| 3d成人免费动漫在线观看| 成人免费福利视频| 美女黄网站人色视频免费国产| 国产精品四虎在线观看免费| 亚洲精品视频在线观看你懂的| 亚洲色自偷自拍另类小说| 国产亚洲无线码一区二区| 亚洲高清视频免费| 亚洲AV无码一区二区大桥未久| 青青草97国产精品免费观看| 最新亚洲成av人免费看| 亚洲一区免费视频| 无码国产精品久久一区免费| 无码免费一区二区三区免费播放| 2019亚洲午夜无码天堂| 久久亚洲日韩看片无码| 亚洲成Av人片乱码色午夜| 亚洲国产亚洲综合在线尤物| 亚洲av日韩综合一区二区三区| a一级爱做片免费| 99久久99热精品免费观看国产| 好爽…又高潮了免费毛片|