在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现，下面主要实现了给循环列表点击添加类的操作

一、单项

目标需求：实现下图，给点击的view增加类，每次只能选择一个。

主要思路：给点击的view增加类，依靠点击的index对state进行赋值。如果相同时，给该view增加类。

实现代码：

.wxml文件

<view>
  <view class='appointent-date'>
    <view  class="appointent-date-div {{state==index?'active-tag':''}}" bindtap="select_date"  wx:for="{{dates}}" data-key='{{index}}'>
      <view class="flex-item" >
        <rich-text class='data_name'>{{item.data_name}}</rich-text>
        <rich-text>{{item.name}}</rich-text>
      </view>
    </view>
  </view>
</view>

 .wxss文件

.appointent-date-div{
  display:inline-block;
  width:20%;
  text-align: center;
  margin-top: 30rpx;
}
.flex-item{
  display: inline-block;
  width:96rpx;
  height: 88rpx;
  font-size: 26rpx;
  border:2rpx solid #999;
  text-align: center;
  border-radius: 10rpx;
  color: #999;
  cursor: pointer;
  line-height: 30rpx;
}
.data_name{
  font-size: 36rpx;
  line-height: 52rpx;

}
.active-tag .flex-item{
  background: #c8321e;
  color:#fff;
  border:1rpx solid #fff;
}

.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dates: [
      { "data_name": "30", "name": "十三"},
      { "data_name": "1", "name": "十四"},
      { "data_name": "2", "name": "十五"},
      { "data_name": "3", "name": "十六"},
      { "data_name": "4", "name": "十七"},
      { "data_name": "5", "name": "十八"},
      { "data_name": "6", "name": "十九"},
      { "data_name": "7", "name": "二十"},
      { "data_name": "8", "name": "廿一"},
      { "data_name": "9", "name": "廿二"},
      { "data_name": "10", "name": "廿三"},
      { "data_name": "11", "name": "廿四"},
      { "data_name": "12", "name": "廿五"},
      { "data_name": "13", "name": "廿六"},
      { "data_name": "14", "name": "廿七"}
    ],
    state:''
  },
  //选择日期后加样式
  select_date: function (e) {
    this.setData({
      state: e.currentTarget.dataset.key,
    });
  },
})

二，多项

目标需求：实现下图，给点击的view增加类，再次点击时取消，可以多项选择。

主要思路：

给dates数组增加一个属性state, 1表示状态选中,0表示未选中，每次点击时修改state的值。

实现代码：

.wxml文件

<view class='appointent-date'>
    <view  class="appointent-date-div {{item.state==1?'active-tag':''}}" bindtap="select_date"  wx:for="{{dates}}" data-key='{{index}}'>
      <view class="flex-item" >
        <rich-text class='data_name'>{{item.data_name}}</rich-text>
        <rich-text>{{item.name}}</rich-text>
      </view>
    </view>
  </view>

.wxss文件

.appointent-date{
  padding:10rpx 30rpx 40rpx 30rpx;
  background: #fff;
  box-sizing: border-box;
}
.appointent-date-div{
  display:inline-block;
  width:20%;
  text-align: center;
  margin-top: 30rpx;
}
.flex-item{
  display: inline-block;
  width:96rpx;
  height: 88rpx;
  font-size: 26rpx;
  border:2rpx solid #999;
  text-align: center;
  border-radius: 10rpx;
  color: #999;
  cursor: pointer;
  line-height: 30rpx;
}
.data_name{
  font-size: 36rpx;
  line-height: 52rpx;

}
.active-tag .flex-item{
  background: #c8321e;
  color:#fff;
  border:1rpx solid #fff;
}

.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dates: [
      { "data_name": "30", "name": "十三", "state": 0 },
      { "data_name": "1", "name": "十四", "state": 0 },
      { "data_name": "2", "name": "十五", "state": 0 },
      { "data_name": "3", "name": "十六", "state": 0 },
      { "data_name": "4", "name": "十七", "state": 0 },
      { "data_name": "5", "name": "十八", "state": 0 },
      { "data_name": "6", "name": "十九", "state": 0 },
      { "data_name": "7", "name": "二十", "state": 0 },
      { "data_name": "8", "name": "廿一", "state": 0 },
      { "data_name": "9", "name": "廿二", "state": 0 },
      { "data_name": "10", "name": "廿三", "state": 0 },
      { "data_name": "11", "name": "廿四", "state": 0 },
      { "data_name": "12", "name": "廿五", "state": 0 },
      { "data_name": "13", "name": "廿六", "state": 0 },
      { "data_name": "14", "name": "廿七", "state": 0 }
    ]
  },
  //选择日期后加样式
  select_date: function (e) {
    var index = e.currentTarget.dataset.key;
    if (this.data.dates[index].state == 1) {
      this.data.dates[index].state = 0;
    } else if (this.data.dates[index].state == 0) {
      this.data.dates[index].state = 1;
    }
    this.setData({
      dates: this.data.dates,
    });
  },
})