JS-实现上一题下一题切换功能_js 循环list数据点击切换下一条-CSDN博客

本文链接：https://blog.csdn.net/dalei9243/article/details/104794656

本文介绍了如何使用JavaScript来实现上一题与下一题的切换功能，涵盖了关键的代码实现和逻辑处理，帮助读者理解动态更新页面内容的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


业务背景：某个数据列表需要对其中的每行数据进行详细信息修改配置。为了提升用户体验，需要在用户触发单条任务记录详细配置界面之后添加进入上一题和下一题的操作。
实现构思：
	有两种办法：第一种简单点的话就是不去数据库实时查询数据，利用已经在列表中的数据信息进行数据切换展示与修改。
				第二种办法稍微麻烦一点，数据切换的时候实时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='selec