首页 > 代码库 > 开博第一篇：记一个前端实现的“换一换”功能

开博第一篇：记一个前端实现的“换一换”功能

2024-07-14 16:15:25   224人阅读

需求的极简概要：实现“换一换”按钮的功能，点击之后，换另一批对应的品牌

 

刚开始的时候考虑使用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());//转换为JSON31             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为该品牌的类目id61                 strTotal += "<a href=http://www.mamicode.com/‘‘ 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     });

 


联系
我们