微信小程序 動態更改選中對象的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;
}

效果圖