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 都较瘦 阅读(3649) 评论(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

导航

统计

公告

博客定位:囿于目前的水平,博客定位在记录自己的学习心得和随手的练习

常用链接

留言簿

随笔分类

随笔档案

文章分类

文章档案

搜索

最新评论

阅读排行榜

评论排行榜