点击按钮显示正确错误状态（点击到正确显示绿色，点击到错误显示红色）

最新推荐文章于 2023-11-16 10:24:55 发布

原创最新推荐文章于 2023-11-16 10:24:55 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种微信小程序中答题页面的设计方案，使用WXML和WXSS实现动态显示选择题及答案反馈，通过JS处理用户选择并与正确答案对比。

效果如下:

wxml:

<view class='difficult2 '>
  <block wx:for="{{dif2_select}}" wx:key="{{index}}">
    <view class="select {{item==answer&&index==id?'correct':''}}  {{item!=answer&&index==id?'error':''}}" bindtap='choose_2' data-concent='{{item}}' data-index='{{index}}'>   
        {{item}}</view>
  </block>
</view>

wxss:

/* 难度2 */
.difficult2 {
  margin-top: 65rpx;
}

.difficult2 .select {
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 80rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #333;
}

.difficult2 .error {
  background: #ff4c4d;
  color: #fff;
}

.difficult2 .correct {
  background: #3ccc1f;
  color: #fff;
}


data:{
    answer: '迪丽热巴',  //正确答案
    dif2_select: ['迪丽热巴', '古力娜扎', '热依扎', '郑爽'],  //选项
}


 choose_2: function (e) {
    var that = this;
    console.log(e.currentTarget.dataset.index);
    var index = e.currentTarget.dataset.index; //本次点击的下标
    that.setData({
      id: index
    })
    },