php 微信小程序 循环 多选,微信小程序实现多选功能

本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下

e316729d1080f098926b03ecc40214aa.gif

代码:

{{num + 1}}/{{quesyion.length}}{{question[num][0]}}

A {{question[num][1]}}

B {{question[num][2]}}

C {{question[num][3]}}

D {{question[num][4]}}

正确答案{{question[num][3]}}

确定

{{con}}

提交答卷

CSS:

/* hotblood_gongkao/pages/answer/answer.wxss */

/* title */

.titleImg{

width: 734rpx;

height: 45rpx;

position: fixed;

top: 0;

display: flex;

flex-direction: row;

align-items: center;

left: 50%;

background: #fbfbfb;

margin-left: -367rpx;

z-index: 10;

}

.titleImg image{

height: 35rpx;

width: 100%;

}

/* end */

page{

height: 100%;

width: 100%;

background: #fbfbfb;

}

.isHide{

display: none;

}

.isShow{

display: block;

}

.title{

font-size: 34rpx;

color: #a6a6a6;

margin: 69rpx 0 0 0;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.answer-list{

}

.answer-child{

width: 672rpx;

margin: 0 auto;

background: #fff;

border-radius: 20rpx;

padding-top:34rpx;

margin-bottom: 20rpx;

margin-top: 72rpx;

box-sizing: border-box;

box-shadow: 0 0 4rpx #dcdcdc;

}

.answer-title{

font-size: 32rpx;

margin: 0 0 0 52rpx;

}

.answer-options{

display: flex;

flex-direction: column;

width: 642rpx;

margin: 32rpx auto 0 auto;

}

.options{

width: 100%;

height: 72rpx;

line-height: 72rpx;

font-size: 32rpx;

padding-left: 30rpx;

box-sizing: border-box;

margin-bottom: 4rpx;

position: relative;

border: 2rpx solid #fff;

}

.dui{

position: absolute;

height: 41rpx;

width: 59rpx;

top:50%;

margin-top: -20rpx;

right: 16rpx;

display: none;

}

.dui2{

display: block!important;

}

.select{

border: 2rpx solid #4ab07e;

box-sizing: border-box;

}

.submit{

height: 120rpx;

width: 100%;

background: #4ab07e;

color: #fff;

font-size: 34rpx;

line-height: 120rpx;

text-align: center;

position: fixed;

left: 0;

bottom: 0;

}

/* 正确答案 */

.answer{

width: 100%;

text-align: center;

color: #ff122f;

font-size: 34rpx;

font-weight: bold;

margin-top: 64rpx;

}

/* end */

/* 下一题 */

.subBtn{

width: 304rpx;

height: 86rpx;

background: #4ab07e;

color: #fff;

font-size: 34rpx;

text-align: center;

line-height: 86rpx;

border-radius: 20rpx;

margin: 190rpx auto 0 auto;

}

js:

// hotblood_gongkao/pages/answer/answer.js

const app = getApp();

Page({

/**

* 页面的初始数据

*/

data: {

question: [

["今天是个好日子", "halou word", "java", "javascript", 'c#'],

["今天是个好日子", "halou word", "java", "javascript", 'c#'],

], //题库

index: 0, //选择的索引

wrong: [], //错误

border: '',

num: 0,

con: '下一题',

isOne: true,

isWan: false,

iswancheng: false,

isque: false,

whether: false,

correct: [], //正确

duiList: 0, //答对的个数

cuoList: 0, //答错的个数

selectIndex: [{

sureid: false

},

{

sureid: false

},

{

sureid: false

},

{

sureid: false

},

],

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function(options) {

this.setData({

})

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function() {

},

// 提交答卷

submit: function(e) {

console.log(this.data.duiList);

console.log(this.data.cuoList);

var num = this.data.num; //当前题目下标

var question = this.data.question; //题库

var duiList = this.data.duiList; //答对多少题

var cuoList = this.data.cuoList; //答错多少题

//获得题目对象的长度

var arr = Object.keys(question);

var len = arr.length;

if ((num + 1) == len) {

var grade = (100 / len) * duiList;

console.log(grade);

wx.redirectTo({

url: '../chengjiu/chengjiu?grade=' + grade,

})

}

},

// 确认选择

confirm: function() {

var num = this.data.num;

var question = this.data.question; //题库

//获得题目对象的长度

var arr = Object.keys(question);

var len = arr.length;

if ((num + 1) == len) {

this.setData({

iswancheng: true,

isOne: true,

isWan: true,

isque: false

})

} else {

this.setData({

isOne: false,

whether: true,

isque: false,

isWan: true

})

}

},

// 下一题

next: function() {

var num = this.data.num; //当前题目下标

this.setData({

num: num + 1,

isOne: true,

isWan: false,

whether: false,

index: 0

})

},

// 选择答案

selectAnswer: function(e) {

console.log(e);

var index1 = e.currentTarget.dataset.index - 1; //当前点击元素的自定义数据,这个很关键

var selectIndex = this.data.selectIndex; //取到data里的selectIndex

selectIndex[index1].sureid = !selectIndex[index1].sureid; //点击就赋相反的值

console.log(selectIndex[index1])

this.setData({

selectIndex: selectIndex //将已改变属性的json数组更新

})

console.log(this.data.selectIndex.in_array(true))

if (selectIndex.in_array(true) == false) {

this.setData({

isque: false

})

} else {

var question = this.data.question; //题库

var num = this.data.num; //当前题目下标

var text = e.currentTarget.dataset.text; //选择的答案

var duiList = this.data.duiList; //答对多少题

var cuoList = this.data.cuoList; //答错多少题

//获得题目对象的长度

var arr = Object.keys(question);

var len = arr.length;

//当前答题为最后一题

if ((num + 1) == len) {

//判断选择的答案和正确答案是否一致

if (text == question[num][3]) {

duiList = duiList + 1;

this.setData({

duiList: duiList,

isque: true

})

} else {

cuoList = cuoList + 1;

this.setData({

cuoList: cuoList,

isque: true

})

}

} else {

//判断选择的答案和正确答案是否一致

if (text == question[num][3]) {

duiList = duiList + 1;

this.setData({

duiList: duiList,

isque: true

})

} else {

cuoList = cuoList + 1;

this.setData({

cuoList: cuoList,

isque: true

})

}

}

}

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function() {

this.question();

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function() {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function() {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function() {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function() {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function() {

}

})

Array.prototype.in_array = function(element) {

for (var i = 0; i < this.length; i++) {

if (this[i].sureid == element) {

return true;

}

}

return false;

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/356024.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

今天在看慕课网的java学习路径

new对象是静态加载类 在编译时刻就需要加载所有可能使用的类 如果有有一个类没有 其他的类也无法使用 通过动态加载类可以解决这个问题 class for name 打印异常栈轨迹Stack Trace。说起栈轨迹,可能很多人和我一样,第一反应就是printStackTrace()方法 classforName //加载…

php+反序列化代码执行漏洞,PHP反序列化漏洞

0x001 漏洞产生原理在反序列化的过程中自动触发了某些魔术方法。未对用户输入的序列化字符串进行检测&#xff0c;导致攻击者可以控制反序列化过程&#xff0c;从而导致XSS、代码执行、文件写入、文件读取等不可控后果。0x002 漏洞触发条件一般只能通过代码审计的方式挖掘该漏洞…

java 应用程序 gui_Java GUI应用程序关闭陷阱

java 应用程序 gui最近&#xff0c;我遇到了一个或两个Java GUI应用程序在关闭时无法关闭的问题。 他们似乎是一个过程&#xff0c;消耗着计算机资源。 今天&#xff0c;我深入探究了问题的根源&#xff0c;这是一个我以前不曾意识到的棘手陷阱&#xff0c;所以我想我会分享一下…

php动态成本管理,网上审批系统环境下的动态目标成本管理

1.预测目标价格和销售量目标价格是根据市场可接受的价格范围、企业自身的竞争优势和企业的经营理念等因素来确定的。在确定目标价格的同时&#xff0c;需要确定在这种价格下企业的预计销售量&#xff0c;因为销售量影响生产量&#xff0c;生产量影响作业量&#xff0c;作业量影…

学习进度(第三周)

所花时间 9.5h 代码量 350行 博客量 2篇 了解到的知识点 Hadoop HBase数据库 转载于:https://www.cnblogs.com/yifengyifeng/p/6542224.html

Java中的值类型:为什么它们不可变?

值类型不必是不变的。 但是他们是。 在上一篇文章中&#xff0c;我讨论了Java中指针与引用之间的区别以及如何传递方法参数&#xff08;按值传递或按引用传递&#xff09;。 这些与Java中尚不存在的值类型密切相关&#xff08;尚未&#xff09;。 John Rose&#xff0c;Brian…

mac设置首页访问php,mac系统下php项目除了首页全访问不了

有网友反映mac配置apache的有问题&#xff0c;除了首页全都访问不了&#xff0c;小编找来了相关的解决办法&#xff0c;有需要的朋友可以来了解一下。httpd.conf配置文件中加载了mod_rewrite.so模块AllowOverride None 将None改为 AllDocumentRoot "/Library/WebServer/Do…

java filter 模式,Java设计模式----过滤器模式(挑三拣四)

过滤器模式描述拦截过滤器模式(Intercepting Filter Pattern)用于对应用程序的请求或响应做一些预处理/后处理。定义过滤器&#xff0c;并在把请求传给实际目标应用程序之前应用在请求上。过滤器可以做认证/授权/记录日志&#xff0c;或者跟踪请求&#xff0c;然后把请求传给相…

表单

表单本身也是DOM树 表单的输入框、下拉框等可以接收用户输入&#xff0c;所以用JavaScript来操作表单&#xff0c;可以获得用户输入的内容&#xff0c;或者对一个输入框设置新的内容。 HTML表单的输入控件主要有以下几种&#xff1a; 文本框&#xff0c;对应的<input type&q…

java项目processes设置,Jvm调优和SpringBoot项目优化的详细教程

参考文章1、先看一下未设置JVM参数的情况&#xff0c;默认情况下&#xff0c;没有设置任何Jvm参数。2、设置Jvm参数。配置参数&#xff1a;关于这些设置的JVM参数是什么意思&#xff0c;参考Jvm调优。-XX:MetaspaceSize128m (元空间默认大小)-XX:MaxMetaspaceSize128m (元空间最…

Git问题Everything up-to-date解决

Git问题Everything up-to-date解决 【自己的亲身错误体验】 我的上一篇博客&#xff0c;说了怎么上传一个项目到git远程上面。今天我写好一个小栗子&#xff0c;准备再次上传的时候。我依旧是放在我的F:\github\js- 这个和我的github上的远程仓库相同名称的文件中的 在这里空白…

java超出gc开销限制_超出了GC开销限制– Java堆分析

java超出gc开销限制这篇文章是我们原来的GC开销超出问题模式的延续。 正确的Java堆分析对于消除O​​utOfMemoryError&#xff1a;GC开销问题至关重要。 如果您不熟悉此Java HotSpot 1.6错误&#xff0c;建议您首先阅读有关此主题的第一篇文章 。 本文将为您提供一个示例程序和…

Java接口long类型精度丢失,解决前后端交互Long类型精度丢失问题

雪花算法ID&#xff0c;对应的后端Long类型&#xff0c;前端number类型&#xff0c;它们的精度不一样&#xff0c;导致精度丢失现象雪花算法得到的ID较长&#xff0c;传到前端后&#xff0c;精度丢失库中&#xff1a;23754851322302474后端&#xff1a;23754851322302474前端&a…

如何模拟Spring bean(版本2)

大约一年前&#xff0c;我写了一篇博客文章如何模拟Spring Bean 。 所描述的模式对生产代码几乎没有侵入性。 正如读者Colin在评论中正确指出的那样&#xff0c;基于Profile注释的间谍/模拟Spring bean是更好的选择。 这篇博客文章将描述这种技术。 我在工作中以及副项目中都成…

eclipse和jdk的版本问题,比如printf()出错

1.右键项目选中properties 2.Java Builder Path 》》》Libraries》》》选中JRE Syste Library[jre7]然后remove 3.Add Library》》》JRE Syetem Library》》》NEXT》》》Alternate JRE:选中最新的jie版本 4.Finish》》》OK&#xff01; 5.再在右键项目选中properties 》》》Ja…

java自定义一个timeout,Timeout操作符 RxJava 学习笔记二十一

timeout用于检测在给定时间内observables没有及时响应。如果指定的时间量没有发出任何项目&#xff0c;则超时会使observables失败并出现TimeoutException。我们将从debounce的示例中重用我们的observable来演示超时。输出&#xff1a;只要值不超过200ms&#xff0c;就会输出。…

用xshell ssh连接测试服务器时候出的问题

问题还原&#xff1a;用ssh连接测试服务器 给我结结实实报了个错 FBIwarning: ----------------------------------------------------------------------------------------------------------------------------以上 问题还原 解决过程&#xff1a;百度 博客地址http://blog.…

maven集成spring_Maven集成测试和Spring Restful Services

maven集成spring介绍 我的原始博客通过一个非常简单的示例展示了如何分离Maven单元和集成测试。 http://johndobie.blogspot.com/2011/06/seperating-maven-unit-integration-tests.html此后&#xff0c;许多人要求我提供比最初使用的示例更实际的示例。 这篇文章显示了如何在实…

WebService.asmx架设后,显示调用按钮的方法

我们在VS本地调试WebService的时候&#xff0c;页面是可以调试的&#xff0c;如下图 但是在发布以后&#xff0c;通过浏览器访问服务器上的地址&#xff0c;是不能调试你的程序的&#xff0c;就变成了这个样子&#xff1a; 可以通过修改服务器上的web.config达到远程调试的效果…

复习者-Java EE 7概览

随着红帽JBoss企业应用平台7&#xff08;EAP 7&#xff09;的出现&#xff0c;甚至最近刚刚通过Java EE 7认证的WebLogic服务器&#xff0c;我认为现在应该为您重新介绍Java Enterprise Edition 7的时候了功能&#xff0c;并指向更多资源。 Java EE 7 –开发人员的生产力&…