小程序 for循环事件只执行一次ppppxxxxmmm的博客-

前言：
相信很大开发者都遇到过这种情况，for循环里面添加一个事件，点击事件通过变量更改样式或者显示某一元素，比如：
当我们点击改变state值的时候，所有的元素都会一起改变，但是我们要的只是点击当前的元素，当前的state改变，这个时候，就不能直接定义一个变量去改变它的状态了

<view a:for="{{list}}"> <!-- 这个state是在js里面的变量，state等于1执行class名为box，不等于1执行class名为boxData --> <view class="{{ state == '1' ? 'box':'boxData' }}" onTap="handleClick"> {{item}} </view> </view> 

 正确方法如下：   使用list数组里面的属性去控制，点击当前，拿到当前的index，去改变它的状态 

html： <view a:for="{{list}}"> <!-- 这个state是在js里面的变量，state等于1执行class名为box，不等于1执行class名为boxData --> <view class="{{ item.state == '1' ? 'box':'boxData' }}" onTap="handleClick" data-index="{{index}}" data-state="{{item.state}}"> {{item}} </view> </view> 

js：

Page({ // 页面的初始数据   data: {     list: [ { "id": 1139427, "fundCode": "502023", "fundName": "鹏华钢铁", "state": 1, }, { "id": 1139427, "fundCode": "502023", "fundName": "鹏华钢铁", "state": 2, }, { "id": 1139427, "fundCode": "502023", "fundName": "鹏华钢铁", "state": 1, }, ] },   handleClick: function (e) { var index = e.currentTarget.dataset.index;//拿到下标 var state = e.currentTarget.dataset.state;//拿到订阅状态的state let listArr = this.data.list;//列表数据 var str = state == '1' ? '2' : '1';     listArr[index].state = str; } }) 

以上方法即可实现for循环出来的事件，点击更改当前的样式。有更好的方法，欢迎大家留言交流~
本文章为原创，转发请注明出处，谢谢!