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

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

  {{item.question}}
  
    {{item.index}}.
     {{item.content}}
  

提交

对应的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);
  }

最终效果如下：