点击按钮显示正确错误状态(点击到正确显示绿色,点击到错误显示红色)

 

效果如下:

点击按钮显示正确错误状态(点击到正确显示绿色,点击到错误显示红色)_第1张图片

wxml:


  
       
        {{item}}
  

 

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;
}

 js


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
    })
    },

你可能感兴趣的:(微信小程序)