微信小程序 动态更改选中对象的css样式

逻辑

①给原数据添加选中状态,例如:select:false 和 判断依据:例如 id:1

②wxml页面三目判断例如: class=" {{ xx.select? 'select' : 'defult' }}"

③在wxss页面分别创建select 和 defult 样式

④给对应标签添加事件接受传入的id值,并进行判断,将点击id的select设置为true,其他为false

 

案例

JS

Page({

  /**
   * 页面的初始数据
   */
  data: {
    monster: {//假设原数据
      '帕里镇': {
        '独眼蝙蝠': {
          'id': 1,
          'name': '独眼蝙蝠',
          'select': false,
        },
        '彭哆菇': {
          'id': 2,
          'name': '彭哆菇',
          'select': false,
        },
        '象牙甲虫': {
          'id': 3,
          'name': '象牙甲虫',
          'select': false,
        },

      },
      '晨光镇': {
        '魔导战甲': {
          'id': 4,
          'name': '魔导战甲',
          'select': false,
        },
        '邪恶的南瓜': {
          'id': 5,
          'name': '邪恶的南瓜',
          'select': false,
        },
        '巨剑浪人': {
          'id': 6,
          'name': '巨剑浪人',
          'select': false,
        },
      }
    }
  },
  
  /**
   * 当选中时触发
   * @param {*} e 
   */
  OnSelect(e) {
    let { id } = e.currentTarget.dataset
    let { monster } = this.data

    console.log("当前点击:", id)

    //根据id,将当前选中的id的select设置为true
    for (let i in monster) {
      for (let o in monster[i]) {
        if (monster[i][o].id == id) {
          monster[i][o].select = true
        } else {
          monster[i][o].select = false
        }
      }
    }

    //渲染数据
    this.setData({
      monster
    })

  },
})

WXML

<view class="box">

  <view class="monster_box" wx:for="{{monster}}" wx:for-item="item" wx:for-index="index" wx:key="index">

    <view wx:for="{{item}}" wx:for-item="item2" wx:for-index="index2" wx:key="index2">
      <!-- 
        class="{{item2.select? 'select':'defult'}}"
        三目运算,有item2.select吗?(为true时) 触发左侧样式:否则触发右侧样式 

        传值:data-id="{{item2.id}} 绑定事件:bindtap="OnSelect" 接收传入的值
      -->
      <view class="{{item2.select? 'select':'defult'}}" data-id="{{item2.id}}" bindtap="OnSelect">{{item2.name}}</view>

    </view>

  </view>

</view>

WXSS

.monster_box{
  display: flex;
  text-align: center;
  margin: 20rpx;
}
.select{
  width: 200rpx;
  border-bottom: 5rpx solid rgb(255, 124, 124);
  margin: 20rpx;
}
.defult{
  width: 200rpx;
  margin: 20rpx;
}

效果图