微信小程序 事件點擊後如何動態增刪class類名（自用，沒毛病）

問了度娘很久，感覺很多例子都用不到開發上，綜合了三個小時。有了完整的方案

第一種 後臺獲取list集合,js中判斷動態修改js

第二種 手動定義list集合,js中判斷動態修改js

流程

後臺返回了一個List保存在page中，wxml中 wx.for循環遍歷。然後動態點擊，調整class的樣式

案例效果 （圈住的部分爲例子，點擊哪個語言，哪個標籤就變黃）

第一種效果圖

第二種效果圖 （這三個標籤，是固定的，不是後臺獲取的）

第一種 ----------後臺動態獲取，前臺動態修改class

代碼部分：

簡易流程：在wxml中 使用 for循環時候的 index索引。當標籤點擊的時候 使用data-index={{index}} 將index傳值，與js中定義的 _tapLatitude 變量作比較，如果相同就使用 orgecol 這個class

剛開始看有點暈，多想一下就明白了

wxml 文件的 wx.for循環

 <view  wx:for="{{languageList}}" wx:for-item="language" wx:for-index="index" class="viewlabel  {{_tapLatitude==index?'orgecol':''}}" data-name="{{language}}" data-index="{{index}}" bindtap="getLanguage">
          {{language}}
 </view>

js中的

Page({

  /**
   * 頁面的初始數據
   */
  data: {
   _tapLatitude:-1,//語種點擊 存儲變量
   },

 //排序語種獲取
  getLanguage : function (e) {
    //因爲是標籤。所以再點一下就要取消
    if (that.data._tapLatitude == e.currentTarget.dataset.index){
    this.setData({
     _tapLatitude:-1, //值還原
     })
    }else{
     this.setData({
      _tapLatitude: e.currentTarget.dataset.index, //獲取index傳入的值。與定義全局變量作比較
     })
     }
   
  },

})

第二種 ----------wxml中固定，js中動態修改class

流程思路同第一種 都用定義一個變量

wxml 文件中的代碼

  <view class="viewcontentone" >
      <view class="contover {{_tapSort==1?'orige':''}} " bindtap="getSort" data-name="距離排序" data-id="1">{{sortItemLists[0]}}</view>
      <view class="contover {{_tapSort==2?'orige':''}}"  bindtap="getSort"  data-name="星級排序" data-id="2">{{sortItemLists[1]}}</view>
      <view class="contover {{_tapSort==3?'orige':''}}"  bindtap="getSort"  data-name="單量排序" data-id="3">{{sortItemLists[2]}}</view>
 </view>

js 文件中的代碼

Page({

  /**
   * 頁面的初始數據
   */
  data: {
   sortItemLists: ['距離排序', '星級排序','單量排序'],//導遊排序列表
   _tapSort:3,//排序點擊 存儲變量 設置3 因爲默認使用3排序
   },

  //修改排序的值字段
  getSort: function (e) {
    var that = this;
    let sortItemId = e.currentTarget.dataset.id
    that.setData({
      "_tapSort": sortItemId
    })
  },

})

因爲每個項目業務不同，所有會有一些偏差。因爲代碼是剪切式。如有遺漏看不懂的地方以及問題留言哈！