小程序 動態改變循環按鈕的樣式

需要做出的效果：

總之，需要做出的效果是，在循環顯示的按鈕中，我單獨點擊一個按鈕，這個按鈕的顏色會改變

思路：
獲取循環的下標，再通過下標去修改按鈕的顏色

代碼：

  <!-- 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）裏直接修改即可。