小程序 动态改变循环按钮的样式

需要做出的效果：

总之，需要做出的效果是，在循环显示的按钮中，我单独点击一个按钮，这个按钮的颜色会改变

思路：
获取循环的下标，再通过下标去修改按钮的颜色

代码：

  <!-- index.wxml -->
  <view class="{{current_score === index?'clicked':'score'}}"  data-key='{{index}}'>
    <text>查看得分</text>
  </view>

/*** index.js*/
 score: function(e) {
    let that = this;
    let index= e.currentTarget.dataset.key;//获取index值
    console.log("得分："+index)
    that.setData({
      current_score: index
    })
  },

/* index.wxss */
.clicked {
  width: 335rpx;
  border-radius: 10rpx 0rpx 0rpx 10rpx;
  color: #fcb216;
  background-color: rgba(245, 174, 21, 0.3);
}

.score {
  width: 335rpx;
  border-radius: 10rpx 0rpx 0rpx 10rpx;
  color: #fcb216;
  background-color: #fff5df;
}

总结：
在 js 里通过 e.currentTarget.dataset.key 获取到下标后，接下来在wxml里 data-key=’{{index}}’ 获取下标，再通过 current_score === index?‘clicked’:‘score’ 去判断当点击时，就改变按钮的颜色，当然若要改变成其他样式，在样式文件（wxss）里直接修改即可。