<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)論排行榜

    主站蜘蛛池模板: eeuss影院免费92242部| 91精品国产免费入口| 亚洲精品高清国产一线久久| 免费成人在线电影| 男人天堂2018亚洲男人天堂| 亚洲精品岛国片在线观看| 亚洲国产精品人人做人人爽 | 四虎影库久免费视频| 中文字幕av免费专区| 亚洲一卡2卡3卡4卡国产网站| 国产成人免费全部网站 | 91免费播放人人爽人人快乐| 成人精品国产亚洲欧洲| 亚洲色图国产精品| 可以免费观看的一级毛片| 99re免费在线视频| 日韩大片免费观看视频播放 | 亚洲女人初试黑人巨高清| 免费a级毛片永久免费| 1000部啪啪未满十八勿入免费| 国产成人 亚洲欧洲| 亚洲国产精品日韩在线观看| 国产av无码专区亚洲国产精品| 国色精品卡一卡2卡3卡4卡免费| 黄色视频在线免费观看| 亚洲综合无码一区二区痴汉| 亚洲av永久无码精品古装片| 免费看一级做a爰片久久| 91成人免费在线视频| a级毛片免费全部播放| 久久精品亚洲日本波多野结衣 | 丝袜捆绑调教视频免费区| 亚洲av乱码中文一区二区三区| 一区二区三区亚洲| 亚洲日本一区二区三区在线| 国产无遮挡又黄又爽免费视频| www视频免费看| 一级成人a毛片免费播放| 久久www免费人成精品香蕉| 国产精品亚洲专区一区| 亚洲色成人WWW永久在线观看|