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

最新推荐文章于 2022-05-16 15:13:25 发布

weixin_30952535

最新推荐文章于 2022-05-16 15:13:25 发布

阅读量873

点赞数

文章标签：前端 java json ViewUI

原文链接：http://www.cnblogs.com/1-1-0/p/3875646.html

版权

本文记录了一个前端实现「换一换」功能的思路，通过在后台拼接JSON字符串，然后在前端解析并展示，避免了额外的AJAX请求。文中提到的方案涉及两个「换一换」按钮，共享同一分页方法，点击即可显示不同内容。

摘要由CSDN通过智能技术生成

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

刚开始的时候考虑使用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         //