js、jq实现答题上一题下一题
一、以下是效果图
说明:第一题只有一个“下一题”按钮,中间题目有两个按钮“上一题”“下一题”,最后一题按钮改为“提交”;
二、代码
js代码(jquery需要自行引入)
var number = document.getElementsByClassName("base_star");var index = 0;var total = $(".answer_list .topic").length;//题目总数var now_topic = index+1*1;//当前题数$(".base_star").text(now_topic+'/'+total+'(单选题)');// 当前题数/总题数$(".prev").hide();$(".next").hide();$(".Submit").hide();$(".topic").hide();//所有题目隐藏$(".topic").eq(index).show();//第一个题目显示// 上一个function prev(){index--;var now_topic = index+1*1;//当前题数$(".base_star").text(now_topic+'/'+total+'(单选题)');$(".topic").hide();//所有题目隐藏$(".topic").eq(index).show();//第几个题目显示// 当索引为0时(题数是1),只显示“下一题”按钮if(this.index===0){$(".prev").hide();$(".next").hide();$(".Submit").hide();$(".first_next").show();}}// 下一个function next(){index++;$(".topic").hide();//所有题目隐藏$(".topic").eq(index).show();//第一个题目显示var now_topic = index+1*1;//当前题数$(".base_star").text(now_topic+'/'+total+'(单选题)');$(".first_next").hide();$(".prev").show();$(".next").show();// 当前题数和总题数相等时(最后一题时),显示提交按钮if(this.index+1 == this.total){$(".first_next").hide();$(".prev").hide();$(".next").hide();$(".Submit").show();}} // 单选$(function () {//点击单选按钮后面的文字说明自动使相应的单选按钮处于选中状态$(".selectRadio").click(function () {//console.info($(this).prev(":radio"));$(this).prev(":radio").prop("checked", true);});});
HTML代码
说明一下:因为修改了一下审核一直不通过,所以把题目都改掉了,但不影响功能。
<div class="answers"><div class="partake_bg"><div class="flex1"><p class="base_star">(单选题)</p></div></div><div class="answer_list"><div class="topic"><p>1、第一题</p><div><p><input type="radio" name="t1" value="A"><span class="selectRadio">A、1945,11月10日 重庆</span></p><p><input type="radio" name="t1" value="B"><span class="selectRadio">B、1946,12月10日 上海</span></p><p><input type="radio" name="t1" value="C"><span class="selectRadio">C、1945,12月16日 重庆</span></p><p><input type="radio" name="t1" value="D"><span class="selectRadio">D、1946,12月6日 北平</span></p></div></div><div class="topic"><p>2、第二题</p><div><p><input type="radio" name="t1" value="A"><span class="selectRadio">A、经济界人士</span></p><p><input type="radio" name="t1" value="B"><span class="selectRadio">B、医卫界人士</span></p><p><input type="radio" name="t1" value="C"><span class="selectRadio">C、知识分子</span></p><p><input type="radio" name="t1" value="D"><span class="selectRadio">D、海外关系人士</span></p></div></div><div class="topic"><p>3、第三题</p><div><p><input type="radio" name="t1" value="A"><span class="selectRadio">A、经济界人士</span></p><p><input type="radio" name="t1" value="B"><span class="selectRadio">B、医卫界人士</span></p><p><input type="radio" name="t1" value="C"><span class="selectRadio">C、知识分子</span></p><p><input type="radio" name="t1" value="D"><span class="selectRadio">D、海外关系人士</span></p></div></div><div class="topic"><p>4、第四题</p><div><p><input type="radio" name="t1" value="A"><span class="selectRadio">A、经济界人士</span></p><p><input type="radio" name="t1" value="B"><span class="selectRadio">B、医卫界人士</span></p><p><input type="radio" name="t1" value="C"><span class="selectRadio">C、知识分子</span></p><p><input type="radio" name="t1" value="D"><span class="selectRadio">D、海外关系人士</span></p></div></div></div><div class="switch_btn"><p class="first_next" onclick="next()">下一题</p><p class="prev" onclick="prev()">上一题</p><p class="next" onclick="next()">下一题</p><p class="Submit bounceIn">提交</p></div></div>
css代码
<style>
* {margin: 0;padding: 0;box-sizing: border-box;
}html {font-size: 16px;
}body,
html {width: 100%;height: 100%;background-color: #f6f7f8;
}.partake_bg{width: 100%;height: 11.875rem;background:linear-gradient(#3e7bea 0%,#93b2f0 100%);padding: 2.8125rem 1.875rem 0;
}
.partake_bg p{font-size: 1rem;color: #fff;padding-bottom: 2.1875rem;
}
.answers{padding-bottom: 5.9375rem;
}.answers .answer_list{width: 92%;height: 36.25rem;background-color: #fff;border-radius: .5rem;-webkit-border-radius: .5rem;-moz-border-radius: .5rem;-ms-border-radius: .5rem;-o-border-radius: .5rem;margin: 0 auto;margin-top: -5rem;padding: 1.875rem .75rem;
}
.answer_list .topic{display: none;
}.answer_list .topic>p{font-size: 1.125rem;color: #373737;font-weight: bold;line-height: 1.875rem;margin-bottom: 1.25rem;}
.answer_list .topic div p{display: flex;justify-content: left;align-items: flex-start;padding: 1.25rem 1.25rem 0;
}
.answer_list .topic div input{margin: .25rem .75rem 0 0;
}
.answer_list .topic div span{width: 16.875rem;font-size: .875rem;color: #666666;line-height: 1.5rem;
}
.switch_btn{width: 100%;height: 4rem;background-color: #fff;box-shadow: 0px 0px 5px 1px rgba(180, 193, 203, 0.5);position: fixed;bottom: 0;left: 0;right: 0;padding: .5rem 1rem;
}
.first_next,.Submit{width: 100%;height: 100%;line-height: 3rem;border-radius: 3rem;background-color: #658BFF;color: #fff;text-align: center;font-size: 1.5rem;
}.prev,.next{width: calc((100% - .625rem) / 2);height: 100%;float: left;line-height: 3rem;border-radius: 3rem;background-color: #658BFF;color: #fff;text-align: center;font-size: 1.5rem;
}
.prev{margin-right: .625rem;border: 1px solid #B3B5B9;background-color: #fff;color: #B3B5B9;
}</style>
为什么不点赞~~~~
js、jq实现答题上一题下一题相关推荐
- 怎么用vue2实现上一题下一题的答题功能
可以使用Vue2中提供的v-if,v-for和v-show指令来实现上一题下一题的答题功能.首先,可以使用v-for指令来遍历所有的题目,然后使用v-if和v-show指令来控制显示哪一题.最后,可以 ...
- vue实现调查问卷一页一题,上一题下一题形式
使用了vant组件的radio 单选框 官网https://youzan.github.io/vant/#/zh-CN/radio 效果图 效果图 做出来的效果图就是上面那样 一页一题 附上代码: & ...
- vue 简单实现上一题下一题问答效果
1.先来看下效果(左上展示题目数量以及当前题序号,当第一题时只有下一题按钮,未回答问题时无法点击下一题,且回答结果展示错误或正确的颜色) 2.接下来我们来看下html是怎么写的吧 <! ...
- 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-实现上一题下一题切换功能
业务背景:某个数据列表需要对其中的每行数据进行详细信息修改配置.为了提升用户体验,需要在用户触发单条任务记录详细配置界面之后添加进入上一题和下一题的操作. 实现构思:有两种办法:第一种简单点的话就是不 ...
- 天空卫士监控行为显示叉_提示信息 判断题,请判断对错! 快捷键设置 元贝驾考 暂 停上一题下一题...
1 驾驶机动车遇到这种信号灯亮时,如果已越过停止线,可以继续通行.查看本题分析 2 行驶在高速公路上遇大雾视线受阻时,应当立即紧急制动停车.查看本题分析 3 机动车仪表板上(如图所示)亮表示发动机可能 ...
- php 答题 一页一题,微信小程序答题,怎么设计页面渲染,答完一题,跳到下一题...
想要的效果 1.第一页只显示第一道题的内容,如图红框 2.答题后,点击下一题,内容显示第二道题的内容 代码 answer.wxml 全民答题 总共1/10题 {{index+1}}: {{item.t ...
- 基于科目分类的题库刷题小程序系统
基于科目分类的题库刷题小程序系统 使用场景 在线答题,是一种在线练习.考试.测评的智能答题系统,适用于企业培训.学生练习.评测考核.知识竞赛.模拟考试等场景. 简介 考研刷题小程序云开发实战.题库小程 ...
最新文章
- 字节码学院全栈学习笔记
- proftpd的搭建以及相关配置
- 有没有想过,自己手写一个连接池?
- JQuery实现Ajax跨域访问--Jsonp原理
- Idea配置spark环境及编写scala代码
- iOS开发-面试总结(十四)
- JavaScript 中回调地狱的今生前世
- 构造函数= default;_Python Collections之defaultdict 和 default_factory关系
- zabbix2.2.3 VMware Vsphere exsi监控配置步骤
- Linux启动和退出系统的方法,实验二 Linux的启动与关闭
- ceph搭建_如何一键搭建并管理Filecoin集群节点 | Gamma OS新功能上线
- 如何用100美元和TensorFlow来造一个能“看”东西的机器人
- 【LeArm】动手实践机械臂(一)
- 如何区分同一Class的不同实例对象
- 吹嘘自己,只是想别人从吾这里学点东西
- linux 多路径配置
- python海龟绘图代码大全-编程入门06:Python海龟绘图
- MySQL InnoDB引擎如何保证事务特性
- android朋友圈发文字换行,朋友圈发文字怎么才显示全文 多按几次换行(大概10次左右...
- 王阳明没法帮你造出光刻机