微信小程序点击移除添加class（点击改变背景颜色和字体颜色）

关注

原创最新推荐文章于 2026-08-14 23:45:00 发布 2.7w 阅读 AI 写同款· GEO 优化 ›

用矿卡P104-100在PVE 8.0.4上跑Ollama：保姆级显卡直通与驱动安装避坑指南本文详细介绍了如何在PVE 8.0.4环境下通过显卡直通技术，利用矿卡P104-100高效部署本地大模型Ollama的全流程。从硬件配置、BIOS设置到驱动安装和性能调优，提供了保姆级的避坑指南和实战解决方案，特别针对矿卡无显示输出的特殊性进行了优化。阅读详情

微信小程序不允许DOM操作，所以不能用addClass这种方法，我的用法如下。

点击元素后，获取元素中data-select值，赋值给catalogSelect，然后判断二者是否相等，一样则添加class（class的css可以先写好）。

源码下载：http://download.youkuaiyun.com/download/dknightl/9939872

这里写图片描述

    <!--页面-->
    <view class="info_choose ">
        <view class="catalog_name">花色</view>

        <view class="catalog_items display-flex-row" >
          <block wx:for="{{catalogs}}">
            <text data-select="{{item.select}}" class="{{item.select == catalogSelect ? 'active':''}} catalog_item" bindtap="chooseCatalog">{{item.catalogName}}</text>
          </block>
        </view>
    </view>


//js代码

Page({
    data: {

        catalogs:[
          { "catalogName": "卡其卡其",
            "select":1          
          },
          {
            "catalogName": "其卡其卡卡其卡其",
            "select": 2
          },
          {
            "catalogName": "鲤鱼鲤鱼",
            "select": 3
          },
          {
            "catalogName": "神迹神迹卡其卡其",
            "select": 4
          },  

        ],
        catalogSelect:0,//判断是否选中
    },

    chooseCatalog:function(data){
      var that=this;
      that.setData({//把选中值放入判断值
        catalogSelect : data.currentTarget.dataset.select
      })


    }
})