微信小程序实现循环的Button动态点击改变字体颜色

                                                   微信小程序之实现循环的Button的动态点击改变字体颜色效果!

近日，在实现一个微信的小程序的点击标识功能，百度发现小程序好像不支持dom操作,无奈只能另寻它法。

JS文件

Page({
  data: {
    selects: ['选择1', '选择2', '选择3', '选择4'],
    clickId: -1
  },
  onLoad: function () {
  },
  /**
   * 用户点击Button,字体变色.
   */
  changeColor: function (res) {
    if (this.data.clickId == res.currentTarget.id){
      this.setData({
        clickId: -1
      })
     return;
    }
    this.setData({
      clickId: res.currentTarget.id
    })
  }
})

 WXML文件

<view class='selects'>
<block wx:key="index" wx:for='{{ selects }}'>
<view class='select' id='{{index}}'bindtap='changeColor'>
<block wx:if="{{index==clickId}}" >
<button class='btn' style='color:black' >
{{ item }}
</button>
</block>
<block wx:else>
<button class='btn' style='color:red'>
{{ item }}
</button>
</block>
</view>
</block>
</view>

 WXSS文件

.selects{
  margin-left: 5%;
  margin-right: 5%;
}
.selects>.select{
  margin: 10rpx;
  float: left;
  width: 195rpx;
}
.selects>.select>.btn{
 background-color: #FFFFFF;
}