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

红太狼 2021-09-22 14:44 1672阅读 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
        })
      },

发表评论取消回复

表情：

评论列表（有 0 条评论，1672人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序-bindtap事件点击改变样式

uu 方式一：采用三目运算数据绑定方式改变样式  <view class="middle"> <view

系统管理员/ 2023年07月17日 02:55/ 0 赞/ 18 阅读

相关微信小程序——wx.navigateTo点击后没反应

首先，检查你跳转的目标路径是不是属于tabBar，若属于，且当前页面存在tabBar时，wx.navigateTo方法是失效的。此时可用wx.switchTab方法，并记得

浅浅的花香味﹌/ 2023年06月03日 12:52/ 0 赞/ 27 阅读

相关微信小程序–样式

微信小程序–样式 1.布局小技巧 1.1 通过添加空标签，实现内容之间的间隔 <view class='height_20'></view>

本是古典何须时尚/ 2023年02月19日 12:29/ 0 赞/ 39 阅读

相关微信小程序的样式

微信小程序中css的使用技巧总结这篇文章介绍了最近很火的微信小程序中css的使用技巧总结，有需要的同学可以参考一下本文微信小程序 css使用技巧 1:用纯CSS创

本是古典何须时尚/ 2022年07月13日 14:00/ 0 赞/ 317 阅读

相关微信小程序点击分享功能

\[html部分\] < view class = "usermotto carDesc carDesc1"> <!-- <button class="user-mo

刺骨的言语ヽ痛彻心扉/ 2022年05月29日 01:48/ 0 赞/ 282 阅读

相关微信小程序点击控件修改样式

通常，页面呈现的效果，我们直接在css中进行，可是有时我们需要进行通过一系列操作比如点击后，要使得样式进行改变。我们知道微信小程序也可以使用一些伪类进行这类操作样式的改变，比如

落日映苍穹つ/ 2022年05月29日 01:37/ 0 赞/ 786 阅读

相关微信小程序点击控件修改样式

微信小程序中不支持直接操作dom，要实现这种效果，我们需要通过设置data，然后利用数据和界面的双向绑定来实现它。第一步：在wxss中定义被点击和未被点击的样式，如下：

电玩女神/ 2022年05月25日 08:14/ 0 赞/ 259 阅读

相关微信小程序点击激活类

闲暇之余研究了一下微信小程序，想做一个点击切换的效果，如下所示： ![70][] 点击之后可以激活相应的类，效果如图： ![70 1][] 没有头绪的时候觉

- 日理万妓/ 2022年05月23日 12:26/ 0 赞/ 239 阅读

相关微信小程序实现样式绑定，点击切换样式

我用的wepy框架开发微信小程序，有双向数据绑定就不需要对dom节点进行操作了。只需要用data-绑定变量就行了。效果图：（在原来的 class上追加样式，默认第一个被选

心已赠人/ 2021年12月09日 07:21/ 0 赞/ 538 阅读

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

分两种（主要是运用到了三元表达示）一、在view中循环了个radio： wxml: <radio-group class="radio_group" b

红太狼/ 2021年09月22日 14:44/ 0 赞/ 1673 阅读