小程序中for循环根据id改变子元素的css样式

html

<view class="hot-text">
  <text class="{{Item==index?'color':''}}"  catchtap='hot_search'  wx:for="{{hotarr}}" data-index='{{index}}' data-text='{{item}}'>{{item}}</text>
</view>

css

.color{
color: #02D2FF;
}

js

data: {
hotarr:[‘小红书’,‘书’,‘的的’,‘书架’, ‘桌椅’],
Item: ‘-1’, // 修改css样式 下表为-1 暂时不选中
},

// 获得值 改变颜色 改变自身的颜色
hot_search(e){
console.log(e);
let that = this;
console.log(e.target.dataset.text) // 获得内容
console.log(e.target.dataset.index)
const id = e.target.dataset.index // 获得下标
that.setData({
Item: id
})
},