微信小程序前端开发试题选择题的选择功能

先贴效果图

wxml文件

<view>
  	{{exam.a.title}}
</view>

<view class="box">
  	<block wx:for="{{exam.b}}" wx:key="index">
  		<view class="every {{is_yes && is_if == index ? 'right':''}} {{!is_yes && exam.a.key == item.choice  ? 'right':''}} {{!is_yes && is_if == index ? 'error':'' }}" style="pointer-events: {{ban ? 'none':'auto'}}" bindtap="select" data-choice="{{item.choice}}" data-index="{{index}}">{{item.choice}}、{{item.content}}</view>
	</block>
</view>

wxss文件

.box{
  width: 100vw;
}
.every{
  width: 80vw;
  height: 80rpx;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  margin: 0 10vw;
  margin-top: 20rpx;
}

.error{
  background-color: red;
  color: #fff;
}

.right{
  background-color: #31c27c;
  color: #fff;
}

js文件内容

Page({
  data: {
    "is_if": 99,
    "is_yes": 99,
    "ban": false,
    "exam": {
      a: {
        "title": "1、下列语句中，显示没有下画线的超链接的语句是(　　)",
        "key": 'A'
      },
      b: [{
          "choice": "A",
          "content": "a{text—decoration：none}"
        },
        {
          "choice": "B",
          "content": "a{text—decoration：no underline}"
        },
        {
          "choice": "C",
          "content": "a{decoration：no underline}"
        },
        {
          "choice": "D",
          "content": "a{text—decoration：none}"
        }
      ]
    }
  },
  select(e) {
    let msg = e.target.dataset
    const key = msg.choice == this.data.exam.a.key
    this.setData({
      is_yes: key ? true : false,
      is_if: msg.index,
      ban: true  //选择一次后是否禁止再次选择
    })
  },
})