微信小程序中实现点击当前标签改变样式以及同时改变后几个标签的样式

如下图，这便是我要实现的效果，点击11点添加样式随后的11点半和12点也添加样式，做小程序的你应该可以发现下边的时间数组并不是一次就可以遍历完，上午、下午、晚上各循环了一遍，之前我用JS和JQuery写过了一遍一样文章：点击这查看，但是小程序并不支持DOM对象，所以这里来看下小程序是怎么实现的。

先看下wxml
我的思路是这样的，首先在循环遍历数组时判断上午下午晚上的时间进行输出，我直接用字符串进行对比然后发现是可以用的，但是有意思的是大小对比一定要有一个区间，比如我判断上午时间是这样写的item.hour<'12:00'，但输出结果怎样10点到11:30的，所以我改成item.hour>='7:00'||item.hour<'12:00'就可以显示全了，同理晚上的也不能直接item.hour >= '18:00'，不然会多出8点到9点的时间。然后是点击时的样式判断，样时有三种cut-left-arc、cut-mid-style、cut-right-arc，分别是左圆角、默认、右圆角，判断值为数组里selected变量，然后定义了下标data-index="{{index}}"用于JS判断更改selected值从而达到不同的样式效果。

原项目太乱了，我就给用到的代码好了

   <!-- 上午-->
    <view wx:if="{{item.hour>='7:00'||item.hour<'12:00'}}" wx:for="{{hourArr}}" wx:key="this" 
    class="{{item.selected===1?'cut-left-arc':''}}{{item.selected===2?'cut-mid-style':''}}{{item.selected===3?'cut-right-arc':''}}" 
    bindtap="clickTime" data-index="{{index}}">
      <text>{{item.hour}}</text>
    </view>
    <!-- 下午-->
     <view wx:if="{{item.hour >= '12:00'&&item.hour < '18:00'}}" wx:for="{{hourArr}}" wx:key="this" 
     class="{{item.selected===1?'cut-left-arc':''}}{{item.selected===2?'cut-mid-style':''}}{{item.selected===3?'cut-right-arc':''}}" 
     bindtap="clickTime" data-index="{{index}}">
      <text>{{item.hour}}</text>
    </view>
    <!-- 晚上 -->
    <view wx:if="{{item.hour >= '18:00'&&item.hour <= '23:00'}}" wx:for="{{hourArr}}" wx:key="this" 
    class="{{item.selected===1?'cut-left-arc':''}}{{item.selected===2?'cut-mid-style':''}}{{item.selected===3?'cut-right-arc':''}}" 
    bindtap="clickTime" data-index="{{index}}">
      <text>{{item.hour}}</text>
    </view>

部分点击时间后的wxss样式参考

.cut-left-arc {
  background-color: #ff86a5;
  color: snow !important;
  border-radius: 30rpx 0 0 30rpx;
}

.cut-left-arc text {
  border: none !important;
}

.cut-mid-style {
  background-color: #ff86a5;
  color: snow !important;
}

.cut-mid-style text {
  border: none !important;
}

.cut-right-arc {
  background-color: #ff86a5;
  color: snow !important;
  border-radius: 0 30rpx 30rpx 0;
}

.cut-right-arc text {
  border: none !important;
}

然后是js部分：
data下的数组定义了每一个时间选择的状态selected

//时间数组
    hourArr: [
    {hour: "8:00",selected: 0}, 
    {hour: "8:30",selected: 0}, 
    {hour: "9:00",selected: 0}, 
    {hour: "9:30",selected: 0}, 
    {hour: "10:00",selected: 0}, 
    {hour: "10:30",selected: 0},
    {hour: "11:00",selected: 0}, 
    {hour: "11:30",selected: 0},
    {hour: "12:00",selected: 0}, 
    {hour: "12:30",selected: 0},
    {hour: "13:00",selected: 0}, 
    {hour: "13:30",selected: 0}, 
    {hour: "14:00",selected: 0}, 
    {hour: "14:30",selected: 0},
    {hour: "15:00",selected: 0},
    {hour: "15:30",selected: 0},
    {hour: "16:00",selected: 0}, 
    {hour: "16:30",selected: 0}, 
    {hour: "17:00",selected: 0}, 
    {hour: "17:30",selected: 0},
    {hour: "18:00",selected: 0},
    {hour: "18:30",selected: 0}, 
    {hour: "19:00",selected: 0},
    {hour: "19:30",selected: 0},
    {hour: "20:00",selected: 0},
    {hour: "20:30",selected: 0},
    {hour: "21:00",selected: 0},
    {hour: "21:30",selected: 0}, 
    {hour: "22:00",selected: 0},
    {hour: "22:30",selected: 0}
    ],

然后是点击时间方法，我把wxml传过来的下标index和时间数组hourArr的下标进行对比，相等时改变selected的状态，当前下标改为1，显示左圆角样式，下标的后一个改为2，显示默认样式，下标后的第两个改为3，显示右圆角样式，但开始时还是要清理已被选中的状态以及最后要更新hourArr时间数组，还有就是点击22点和22点半时会报错，因为时间长度不够了，加个判断弹窗就好了。

  //选择时间
  clickTime: function(e) {
    // console.log(e)
    let myIndex = e.currentTarget.dataset.index;
    console.log(myIndex)
    let hourArr = this.data.hourArr;
    // console.log(hourArr)
    //清理选中的状态
    for (let index in hourArr) {
      hourArr[index].selected = 0;
    }
    for (let index in hourArr) {
      // console.log(index)
      if (myIndex == index) {
        hourArr[index].selected = 1;
        let index1 = myIndex + 1;
        // console.log(index1)
        let index2 = myIndex + 2;
        hourArr[index1].selected = 2;
        hourArr[index2].selected = 3;
      }
    }
    // console.log(hourArr)
    //返回新状态的小时数组
    this.setData({
      hourArr: hourArr
    })
  },