E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实现答题样式(记录答案选项)

E企盈直播平台营销卖货系统

之前写过一篇博客记录了微信小程序如何实现答题样式,有一些朋友看完后想要知道选中答案后是怎么记录答案的,在这里简单处理一下逻辑,记录一下选中的答案,上篇地址如下:https://blog.csdn.net/u013982652/article/details/88121647首先问答题的数据结构要稍微变一下,多了个index记录ABCD这些,具体如下: data: {    quest: [{      id: 1,      type: 1, //类型,1.单选,2.多选      question: “1.你有女朋友吗?(单选)”,      answers: [{        index: ‘A’,        content: ‘有’      }, {        index: ‘B’,        content: ‘没有’      }]    }, {      id: 2,      type: 1,      question: “2.目前薪资在哪个范围?(单选)”,      answers: [{        index: ‘A’,        content: ‘3-6k’      }, {        index: ‘B’,        content: ‘6-8k’      }, {        index: ‘C’,        content: ‘8-10k’      }, {        index: ‘D’,        content: ’10k以上’      }]    }, {      id: 3,      type: 2,      question: “3.你喜欢哪一种编程语言?(多选)”,      answers: [{        index: ‘A’,        content: ‘Java’      }, {        index: ‘B’,        content: ‘C语言’      }, {        index: ‘C’,        content: ‘PHP’      }, {        index: ‘D’,        content: ‘Python’      }, {        index: ‘E’,        content: ‘JavaScript’      }, {        index: ‘F’,        content: ‘其他’      }]    }]  }, 然后wxml也稍微修改一下,具体如下:view class=’quest_container’ wx:for=”{{quest}}” wx:key=”id” wx:for-index=”outterIndex”  text{{item.question}}/text  view wx:for=”{{item.answers}}” wx:key=”content” bindtap=”answerSelected” data-outidx='{{outterIndex}}’ data-idx=”{{index}}” class=”item {{item.selected?’active’:”}}”    text{{item.index}}./text    text {{item.content}}/text  /view/viewview class=”submit_btn” bindtap=”submit”提交/view对应的wxss如下:.quest_container {  padding: 20rpx;}.item {  margin-top: 10rpx;}.active {  color: red;}.submit_btn {  background: #00a050;  color: white;  margin: 50rpx;  padding: 25rpx;  border-radius: 10rpx;  text-align: center;}对应的绑定事件如下: // 点击问题答案触发事件  answerSelected(e) {    let outidx = e.currentTarget.dataset.outidx;    let idx = e.currentTarget.dataset.idx;    let question = this.data.quest[outidx];    if (question.type == 1) {      //单选      for (let item of question.answers) {        item.selected = false;      }      question.answers[idx].selected = true;      this.setData({        quest: this.data.quest      });    } else if (question.type == 2) {      //多选      question.answers[idx].selected = !question.answers[idx].selected;      this.setData({        quest: this.data.quest      });    }  },  // 点击提交按钮  submit() {    let {      quest    } = this.data;    //用来保存选中的答案    let answerSelected = [];    for (let questItem of quest) {      if (questItem.type == 1) { //处理单选题        let isSelected = false;        for (let answerItem of questItem.answers) {          if (answerItem.selected) {            //答案被选中            isSelected = true;            answerSelected.push(answerItem.index);          }        }        if (!isSelected) {          //如果一个都没选          answerSelected.push(”);        }      } else { //处理多选题        let multiAnswer = [];        for (let answerItem of questItem.answers) {          if (answerItem.selected) {            //答案被选中            multiAnswer.push(answerItem.index);          }        }        answerSelected.push(multiAnswer.join(‘,’));      }    }    console.log(answerSelected);  }最终效果如下:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现答题样式(记录答案选项)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏