JS-实现上一题下一题切换功能
2024-04-29 11:22:09
业务背景：某个数据列表需要对其中的每行数据进行详细信息修改配置。为了提升用户体验，需要在用户触发单条任务记录详细配置界面之后添加进入上一题和下一题的操作。
实现构思：有两种办法：第一种简单点的话就是不去数据库实时查询数据，利用已经在列表中的数据信息进行数据切换展示与修改。第二种办法稍微麻烦一点，数据切换的时候实时rownum去数据库查询定位当前数据行的index，然后切换--|++index。目前采用的是第一种方案：利用已经分页好的数据，提供仅在当前界面中显示的数据上下行数据的切换。实现思路：1. 预设JS公共对象，var list;预设JS公共index，var index = 0;2. 数据初始化完成之后以index为list对象的一级key，分别将列表数据拼装初始化进入list对象。格式如下：list = {0:{key:"",value},1:{key:"",value}n:{key:"",value}}说明一下：在当前的业务场景中：若数据在业务条件满足的情况下：列表数据可以进行详情编辑。若业务条件不满足的情况下：列表是不提供详情编辑的；所以在这种场景下数据拼装的时候有一个优势：不必担心有垃圾冗余数据插入到公共对象中，所有插入的数据都是可编辑的数据。也就是说如果解决了公共索引实时获取的问题，那么上下行数据的切换将非常简单。实时公共索引的获取：1.在数据拼装的时候，在数据列中预设隐藏域，[id+index|value]都拼装成动态的。2.在数据列表初始化完成之后，此时初始化公共对象数据初始化的接口，便能够将数据列表中已确认可以修改的所有行级数据都拼装进入list公共对象中。3. 在数据列表触发进入详情编辑界面的时候，获取当前行级数据隐藏于中的id，截取id的index进行上下题执行键的处理，然后将index赋值到公共index对象。4. 剩下上下题的切换只需要++|--即可以完成！代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="/xx.css"/>
<script src="<%=request.getContextPath()%>/plugins/jquery/jquery.min.js"></script><script type="text/javascript">/*** 公共变量设定！* ndate：时间对象获取！* year|new_year：当前年时间获取！* month：当前月时间获取！* last_year：上一年|去年时间处理！* last_l_year：去年的去年时间处理！* * initEmp_list!* list：初始化域值数据对象！* index：初始化当前域值对象key!*/var ndate = new Date();var year = ndate.getFullYear(); var new_year = year;var last_year = year - 1 ;var last_l_year = year - 2 ;var month = ndate.getMonth() + 1; var list;var index = 0; // init.$(function(){/*** 状态参数栏数据初始化！* month_id：月度数据初始化！* yearOptionInit()：年度数据初始化！* startsIdOptionInit()：一级界面-审核结果-初始化！* startsIdInsidOptionInit()：二级界面-审核结果-初始化！（模态窗）*/yearOptionInit(); // 年度数据初始化！startsIdOptionInit(); // 一级界面-审核结果-初始化！startsIdInsidOptionInit(); // 二级界面-审核结果-初始化！（模态窗）list = window.list = {};$("#month_id").empty();$("#month_id").append("<option selected='selected' value='1'>1月</option><option value='2'>2月</option><option value='3'>3月</option><option value='4'>4月</option><option value='5'>5月</option><option value='6'>6月</option><option value='7'>7月</option><option value='8'>8月</option><option value='9'>9月</option><option value='10'>10月</option><option value='11'>11月</option><option value='12'>12月</option>"); /*** 域参数获取。* y：年度参数获取！* m：月度参数获取！* AGENCY_ID：经销商编号参数获取！* status：状态参数获取！*/var y = '${pd.YEAR}';var m = '${pd.MONTH}';var AGENCY_ID = '${pd.AGENCY_ID}';var status = '${pd.status}';/*** option对象获取！* y_option：年份！* m_option：月份！* starts_option：一级界面-审核结果！*/var y_option = document.getElementById("year_id");var m_option = document.getElementById("month_id");var starts_option = document.getElementById("starts_id");/*** option对象缓存数据回显！* * y_option：年度！* m_option：月度！* starts_option：一级界面-审核结果！* k：k！*/for(var i=0;i<y_option.length;i++){if(y_option[i].value==y)y_option[i].selected = true;}if(m == ""){for(var i=0;i<m_option.length;i++){if(m_option[i].value== month)m_option[i].selected = true;}}else{for(var i=0;i<m_option.length;i++){if(m_option[i].value==m)m_option[i].selected = true;}}for(var i=0;i<starts_option.length;i++){if(starts_option[i].value==status)starts_option[i].selected = true;}$("#k").val(v);});// 年度数据初始化!function yearOptionInit(){$("#year_id").empty();$("#year_id").append("<option selected='selected' value='"+new_year+"'>"+new_year+"年</option>"); $("#year_id").append("<option value='"+last_year+"'>"+last_year+"年</option>"); $("#year_id").append("<option value='"+last_l_year+"'>"+last_l_year+"年</option>"); }// 一级界面-审核结果-初始化！function startsIdOptionInit(){$("#starts_id").empty();$("#starts_id").append("<option selected='selected' value='0'>全部</option>"); $("#starts_id").append("<option value='3'>待定</option>"); $("#starts_id").append("<option value='1'>一致</option>"); $("#starts_id").append("<option value='2'>不一致</option>"); }// 二级界面-审核结果-初始化！（模态窗）function startsIdInsidOptionInit(){$("#starts_id_insid").append("<option selected='selected' value='0'>未审核</option>"); $("#starts_id_insid").append("<option value='3'>待定</option>"); $("#starts_id_insid").append("<option value='1'>一致</option>"); $("#starts_id_insid").append("<option value='2'>不一致</option>"); }/*** starts_option：审核结果-option对象获取！* starts_value：审核结果-value值！*/function getSecond_SHJG(){var starts_option = document.getElementById("starts_id_insid");return starts_option.options[starts_option.selectedIndex].value; }// y_option：年份！function getYOption(){var y_option = document.getElementById("year_id");return y_option.options[y_option.selectedIndex].value; }// m_value：月份!function getMOption(){var m_option = document.getElementById("month_id");return m_option.options[m_option.selectedIndex].value; }// A1样式单开！function A1(){// 设置[上一题]-button-样式！$("#ThePrev").css("display", "none");/* $("#ThePrev").css("color", "#7B7C7C"); document.getElementById("ThePrev").setAttribute("disabled", true); */// 恢复[下一题]-button-样式！$("#TheNext").css("display", "inline-block");/* $("#TheNext").css("color", "inline-block"); document.getElementById("TheNext").removeAttribute("disabled"); */}// B1样式单开！function B1(){// 设置[下一题]-button-样式！$("#TheNext").css("display", "none");/* $("#TheNext").css("color", "#7B7C7C"); document.getElementById("TheNext").setAttribute("disabled", true); */// 恢复[上一题]-button-样式！$("#ThePrev").css("display", "inline-block");/* $("#ThePrev").css("color", "black"); document.getElementById("ThePrev").removeAttribute("disabled"); */}// 双开！function rollBackCss(){// 恢复[上一题]-button-样式！$("#ThePrev").css("display", "inline-block");/* $("#ThePrev").css("color", "black"); document.getElementById("ThePrev").removeAttribute("disabled"); */// 恢复[下一题]-button-样式！$("#TheNext").css("display", "inline-block");/* $("#TheNext").css("color", "black"); document.getElementById("TheNext").removeAttribute("disabled"); */}// 关闭！function clossAB(){// 设置[上一题]-button-样式！$("#ThePrev").css("display", "none");/* $("#ThePrev").css("color", "#7B7C7C"); document.getElementById("ThePrev").setAttribute("disabled", true); */// 设置[下一题]-button-样式！$("#TheNext").css("display", "none");/* $("#TheNext").css("color", "#7B7C7C"); document.getElementById("TheNext").setAttribute("disabled", true); */}// 上一题！function ThePrev(){index = --index;if(index == 0){ A1(); }else{ rollBackCss(); }ModelSetData(list[index].k,list[index].v);}// 下一题！function TheNext(){index = ++index;if(index == Object.keys(list).length-1){ B1(); }else{ rollBackCss(); }ModelSetData(list[index].k,list[index].v);}/*** 数据初始化！*/function ModelSetData(k,v){$("#k").attr("src","../sign/toShowPhoto?PHOTO_ID="+jzQ_id);$("#v").attr("src","../month/toShowPhoto?AWARD_ID="+ydQ_id);}// 二级界面-取消|关闭事件！function closeSubB(){ $('#myModal').modal('hide'); }/*** 获取公共对象表索引！* index：当前对象指向的索引!*/ function thisEmp_Key(key){index = key.slice(-1); // First_Data!if(list[Object.keys(list)[0]].key == key && list[Object.keys(list).length-1].key != key){ A1(); }// Last_Data!if(list[Object.keys(list).length-1].key == key && list[Object.keys(list)[0]].key != key){ B1(); }// First|Last_Data!if(list[Object.keys(list)[0]].key == key && list[Object.keys(list).length-1].key == key){ clossAB(); }// Among_Data!if(list[Object.keys(list)[0]].key != key && list[Object.keys(list)[Object.keys(list).length-1]].key != key){ rollBackCss(); }}// 列表数据对象化！function initEmp_list(){var this_key;var x = 0;var key,v;for(var k=0;k<10;k++){this_key = "k" + k;key = $("#k"+k).val();v = $("#v"+k).val();if(EMP_ID != undefined){list[x] = {};list[x].key = this_key;list[x].EMP_ID = key;list[x].v = v;x++;}}}</script></head>
<body><div class="#"><div class="oneHW">xxxxx</div><div class="ohd upStatus"><button class="First_B" onclick="closeSubB();"><span>取消</span></button><button class="First_B" id="TheNext" onclick="TheNext();"><span>下一题</span></button><button class="First_B" id="ThePrev" onclick="ThePrev();"><span>上一题</span></button></div></div><form action="xxx.do" name="Form" id="Form" method="post"><table class="#" width="" border="1" cellpadding="0" cellspacing="0"><thead><tr><td width="40" align="center" bgcolor="#"><strong><font color="#">序号</font> </strong></td><td><strong><font color="#">aa</font></strong></td> <td><strong><font color="#">bb</font></strong></td> <td><strong><font color="#">cc</font></strong></td> </tr></thead><tbody><c:choose><c:when test="${not empty list}"><c:forEach items="${list}" var="var" varStatus="vs"><tr><td>aa</td><td>bb</td><td><c:if test="${var.cc == ''}">NULL DATA</c:if><c:if test="${var.cc != ''}"><c:if test="${var.dd != ''}"><c:if test="${var.STATUS == 0}"><input type="hidden" id="k${vs.index}" value="k"/><input type="hidden" id="v${vs.index}" value="${var.v}"/><a href="javascript:{showModel('${var.k}','${var.v}');thisEmp_Key('k'+'${vs.index}');}">xxx</a></c:if><c:if test="${var.STATUS == 1}"><input type="hidden" id="k${vs.index}" value="k"/><input type="hidden" id="v${vs.index}" value="${var.v}"/><a href="javascript:{showModel('${var.k}','${var.v}');thisEmp_Key('k'+'${vs.index}');}">xxx</a></c:if><c:if test="${var.STATUS == 2}"><input type="hidden" id="k${vs.index}" value="k"/><input type="hidden" id="v${vs.index}" value="${var.v}"/><a href="javascript:{showModel('${var.k}','${var.v}');thisEmp_Key('k'+'${vs.index}');}">xxx</a></c:if></c:if></c:if></td></tr></c:forEach></c:when><c:otherwise><tr class="main_info"><td colspan="100" class="center" >没有相关数据</td></tr></c:otherwise></c:choose></tbody></table></form><script type="text/javaScript">/** initEmp_list()：初始化数据对象赋值映射！*/$(function(){initEmp_list();});</script>
</body>
</html>
JS-实现上一题下一题切换功能相关推荐
- js、jq实现答题上一题下一题
一.以下是效果图 说明:第一题只有一个"下一题"按钮,中间题目有两个按钮"上一题""下一题",最后一题按钮改为"提交": ...
- vue实现调查问卷一页一题，上一题下一题形式
使用了vant组件的radio 单选框 官网https://youzan.github.io/vant/#/zh-CN/radio 效果图 效果图 做出来的效果图就是上面那样 一页一题 附上代码: & ...
- vue 简单实现上一题下一题问答效果
1.先来看下效果(左上展示题目数量以及当前题序号,当第一题时只有下一题按钮,未回答问题时无法点击下一题,且回答结果展示错误或正确的颜色) 2.接下来我们来看下html是怎么写的吧 <! ...
- 怎么用vue2实现上一题下一题的答题功能
可以使用Vue2中提供的v-if,v-for和v-show指令来实现上一题下一题的答题功能.首先,可以使用v-for指令来遍历所有的题目,然后使用v-if和v-show指令来控制显示哪一题.最后,可以 ...
- vue 音乐播放器上一首 下一首切换
vue 音乐播放器上一首 下一首切换 根据自定义属性的值找到元素 我是使用监听来实现切换的,将v-for循环列表的index存储在vuex中,点击上一首或下一首改变index的值,在另一个组件中监听i ...
- JS实现答题上一题下一题
以下是实现效果图 JS块代码 var TRUE_COUNT = 0//正确的题数var count = 10;//当前所在题数var thisURL = document.URL;var getval ...
- vue实现答题考试功能(上一题下一题)
1,后端返回数据 questionList: [{id: "1",name: "one",question: "问题1111111?",an ...
- js获取上一页下一页地址,当前页地址前进和后退
history.back(-1) //直接返回当前页的上一页,数据全部消息,是个新页面 history.go(-1) //也是返回当前页的上一页,不过表单里的数据全部还在 document.write ...
- php如何实现上一篇下一篇的功能
每天都抽一点时间总结一下. 在实际php开发当中,关于一些发布新闻或者文章,一般会涉及上一篇,下一篇的功能.在做这个功能时,首先会想到,如何一步的实现呢?我会想到的是,怎样拿到上一篇的id,和下一篇的 ...
最新文章
- java 易变变量_提高java编程质量 - （一）易变业务使用脚本语言编写
- 腾讯云服务器 linux 镜像安装项目环境mysql心得
- 怎么样实现对一个对象的深拷贝
- 软件静态架构 软件组件图_组件图| 软件工程
- 一阶电路中的时间常数_你知道RC电路和RL电路中时间常数的来源么？
- 【计算机网络】Internet原理与技术2（因特网的路由协议RIP、OSPF、BGP，网络地址转换NAT，网络协议IPv6）
- python中读取文本文件_利用Python读取文本文件？
- python1到100偶数求和_python1-100怎样偶数求和？_后端开发
- vs2010 sp1 安装Silverlight5 语言版本不匹配 解决方案
- VC无闪烁刷屏技术的实现【转】
- 【u008】瑞瑞的木棍
- 宇宙最强下载器：IDM 俄罗斯大神版
- 聊聊小程序第三方登录
- 懒人理财法之基金定投（Automatic Investment Plan）
- 电容三点式LC振荡器工作原理
- 工业界开源和学术界开源的差异和一种设想的转化方式
- 找回你 C 盘丢失的空间（SpaceSniffer）
- ser2net的测试
- JQuery EasyUI Datagrid 清空排序状态（箭头）代码
- HTML+JavaScript飞机大战小游戏简易版
热门文章
- ue4导入倾斜摄影_倾斜摄影如何和bim结合？倾斜摄影数据怎么导？我来告诉你！...
- 【北大/上交/浙大/中科大/山大】公布复试分数线！【34所自划线】
- 【oracle】查询===Oracle数据库 子查询(嵌套查询)简单例子
- 十款浏览器插件，让你拥有更好的浏览器体验
- Unity3d 实现节奏空间（Beat Saber）模型切割功能项目工程源码。
- ZOJ 3557 （插板法+Lucas定理）
- ZCANPRO 周立功CAN通道配置方法
- 手机怎么压缩证件照大小？这样压缩太简单
- windows7浏览器无法打开html,win7网页无法打开出现HTML Parsing Error的解法
- 步进电机控制Proteus仿真