微信小程序中for循环点击后的样式

最新推荐文章于 2024-08-27 14:14:49 发布

米斯特俞

最新推荐文章于 2024-08-27 14:14:49 发布

阅读量3.6k

点赞数

分类专栏：微信小程序有关文章标签：微信小程序中for循环点击后的样式

本文链接：https://blog.csdn.net/weixin_40570675/article/details/83549903

版权

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

3 篇文章 0 订阅

订阅专栏

分两种（主要是运用到了三元表达示）

一、在view中循环了个radio：

wxml:

<radio-group class="radio_group" bindchange="radioCheckedChange" name="answer1">
            <view wx:for="{{item.detail}}" wx:key="{{id}}" wx:for-item="ansItem"  wx:for-index="index" style='{{key==index?"color:red;":""}} z-index:999;' bindtap='changColor' data-index='{{index}}'>
              <label>
                <radio class='radio' value='{{ansItem.idValue}}' hidden='true' /> {{ansItem.ans}}
              </label>
            </view>
</radio-group>

wxjs:

changColor:function(e){
    this.setData({
      key: e.currentTarget.dataset.index,
    })
  },

二、在label中循环了个radio：

wxml:

<radio-group bindchange="radioCheckedChange" name="answer2">
    <view class="flex_item">
            <label class="{{radioCheckVal2== 'A' ?'active':''}}">
              <radio value='A' hidden='true'/>A、{{item.ansA}}
            </label>
    </view>
</radio-grop>

wxss:

.flex_item label.active{
 color: red;
 border-bottom: 2px solid red;
}

wxjs:

data: {
    questions: question_s,
    radioCheckVal2: "",
		
  },
  radioCheckedChange: function(e) {
    var formData = e.detail.value;
    console.log("分数：" + formData)
    this.setData({
      radioCheckVal2: formData
    })
  },