微信小程序实现答题样式2（记录答案选项）

之前写过一篇博客记录了微信小程序如何实现答题样式，有一些朋友看完后想要知道选中答案后是怎么记录答案的，在这里简单处理一下逻辑，记录一下选中的答案，上篇地址如下：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>
</view>
<view 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);
  }

最终效果如下：