接个吻. 2022-02-10 23:14 采纳率: 93.1%
浏览 236
已结题

微信小程序怎么动态设置class值

        <view class="anthology_title">
          <text>选集</text>
          <text>{{vurl.length}}</text>
        </view>
        <view class="anthology_item">
          <view wx:for="vurl" bindtap="xj"><!--主要问题在这里,这个wxfor这里-->
            <text wx:if="{{index == 0}}" class="choice">{{index + 1}}</text>
            <text wx:else class="no">{{index + 1}}</text>
          </view>
        </view>

问题在vx:for那一部分。默认进去第一个text的class是choice,这个我已经配置好了,我想的是,当我点了这个wx:for里面的其他容器的时候(获得焦点),更改no为choice,然后其他失去焦点的容器又变回去no

  • 写回答

7条回答 默认 最新

  • CSDN专家-showbo 2022-02-11 10:03
    关注

    用一个变量记录选中的下标,然后wx:for的时候和遍历到的数组下标index比较下就行,不需要if判断,直接设置class属性,示例如下
    代码片段:https://developers.weixin.qq.com/s/7F8lEZmc7rwj

    img

    js

    Page({
    data:{
    selected:0,//要更改选择默认的项或者保存后读取数据库更改这个数据项就行
    vurl:['url1','url2','url3']
    },
    xj(e){
      this.setData({selected:e.currentTarget.dataset.index})
    }
    })
    
    

    wxml

    <view class="anthology_title">
              <text>选集</text>
              <text>{{vurl.length}}</text>
            </view>
            <view class="anthology_item">
              <view wx:for="{{vurl}}" bindtap="xj" data-index="{{index}}">
                <text class="{{index==selected?'choice':'no'}}">{{index + 1}}--{{item}}</text>
              </view>
            </view>
    
    
    

    wxss

    .choice{color:#f00}
    .no{color:black}
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 前端不释卷leo 前端领域新星创作者 2022-02-10 23:30
    关注

    其实你可以这么做:
    你可以在遍历的每个对象中维护自己的一个状态,用来标识当前的样式,比如默认第一个对象的样式是“选择”,其他的是“不选择”,然后在点击其他对象的时候将当前点击的对象的样式标识为“选择”,其他标识为“不选择”,这样每个对象根据自己的样式进行渲染,即点击谁,谁“选择”。

    评论
  • 陆小叁 2022-02-11 08:16
    关注
    1. 定义不同的class样式
    2. 定义一个变量,用于当触发条件满足该条件时切换到该样式

    以上只为思路

    评论
  • 崽崽的谷雨 2022-02-11 09:24
    关注
    评论
  • 向上的时钟塔 2022-02-11 09:25
    关注

    img

    也可以把变量定义到item对象里,每次只需要再js里改就行

    评论
  • 笑丶日葵 2022-02-18 20:55
    关注

    三元运算,第一个参数就是状态,后面是你要加的类名

    评论
  • 有问必答小助手 2022-02-19 22:36
    关注
    您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
    PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
    评论
查看更多回答(6条)

报告相同问题?

问题事件

  • 系统已结题 2月27日
  • 已采纳回答 2月19日
  • 创建了问题 2月10日

悬赏问题

  • ¥20 python 3des pyDes库
  • ¥15 关于#mysql#安装失败的问题。MySQL
  • ¥15 想问一下for循环计算表达式的方法,第一次接触
  • ¥15 如何在VA框架上面加功能,去读取框架内任何app数据功能
  • ¥15 关于#c语言#的问题:用c或c++写一个计算下列问题有关软件工程的代码并加上分析
  • ¥15 Zeppelin0.10.0版本升级lib包下的shiro-web
  • ¥15 链表入队的指针内存问题
  • ¥20 vba如何写本地html文件执行js
  • ¥15 VS2022的C#如何创建
  • ¥20 关于#用户注册#的问题,如何解决?