微信小程序：动态控制class属性

一、需求：

  点击一个选项，让其出现不同于其他选项的样式，比如选项文字的颜色变红。
二、初步解决方案：

  可以设置一个活跃选项的数据来记录选中选项的下标（默认为0），其次选中其他选项时可以通过点击事件获取到所选选项的下标，并赋值给活跃选项。要点击的选项是 wx:for 循环出来的，所以接下来就是通过一个三元运算来判断每个循环的元素是否被选中，选中则加特殊样式。

js：

cateActive: '0',    // 活跃选项下标



clickCate(e) {

    console.log(e)

    this.setData({

      cateActive: e.currentTarget.dataset.index

    })

},

wxml：

<view class='task_cate'>

  <view wx:for='{{cateArr}}' class='cate_item' wx:key='cate' bindtap='clickCate'>

    <view class='cate_icon'><image src='../../images/{{item.icon}}.png'></image></view>

    <view class='cate_text {{index == cateActive ? "cate_text_active" : ""}}'>{{item.text}}</view>

  </view>

</view>

  果不其然，出现问题了。不管怎么点击，只有第一个选项是红色的。

  经过排查，看到控制台的信息如下：

  可以看出，currentTarget.dataset中并没有我们所需要的值。通过查阅资料，使用 data-index 可以将选项的下标值通过事件对象（event）反馈给函数，也就是 e 。

三、最终解决方案：

  在初步解决方案的基础上，在标签中定义 data-index='{{index}}'，使得选项下标值可以通过事件对象（event）被点击函数获取到。

  通过这个小小的改动即可成功解决。

四、总结：

  原以为，点击的选项是 wx:for 循环出来的，可以直接通过 {{index}} 来做三元运算，但是事件对象（event）并不会通过这样的方式返回给函数，必须依靠 data-index='{{index}}'。