小程序循环体内点击事件如何改变当前点击元素和兄弟的数据？

Question

需求是点击哪个分类，哪个分类的样式改变，兄弟分类样式消失！

代码如下：

思路是想通过改变active的布尔值实现，我像vue一样直接把当前元素的active当作函数参数传入，打印出来，发出警告：

请问是我思路不对吗？不能用传参的方法，感觉无从下手啊

Answer 1

最近在github上面看到了weui库，里面有类似的功能，仿照他的方法想到一个更简便的方法，自问自答一波吧

大致思路就是利用小程序里面自带的index索引值来实现：

把index索引值通过属性id传入，让activeIndex与inex做比较，相等则使用样式active，js只用一个activeIndex数据控制即可，每次点击都把activeIndex设置为当前点击对象的id，代码改写为：

html

  <view wx:for="{{used_list}}" wx:key="*this" class={{activeIndex==index?'active':''}}" id="{{index}}" bindtap="active">
    <text>{{item.title}}</text>
  </view>
  

js

   activeIndex:0,
    used_list: [
      { title: "分类01", shop_name: "猪肉"},
      { title: "分类02", shop_name: "鸡肉"},
      { title: "分类03", shop_name: "牛肉"},
    ]
  },
  active:function(e){
    this.setData({
      activeIndex: e.currentTarget.id
    })
  }

这样的方法比较之前的好处是，只需要使用一次setData就行，小程序多次使用setData会耗费性能，还有就是代码量更少了

Answer 2

思路没问题，你在for这行绑定一个参数（如分类的id或者当前used_list的index），然后在tap事件里进行获取，在事件函数active内根据获取的参数判断是哪个分类。

// 下面根据title来判断

<view wx:for="{{used_list}}" class="{{item.active ? 'active' : ''}}" bindtap="active" data-title="{{item.title}}">
    <text>{{item.title}}</text>
</view>

JS:

active: function(e) {
    var title = e.currentTarget.dataset.title;
    // 根据title找到对应的对象，并将active设置为true
    // 将其他active设置为false

    var used_list = this.data.used_list;
    for (var i = 0; i < used_list.length; i++) {
        var obj = {};
        var key = 'used_list[' + i + '].active';
        obj[key] = title == used_list[i].title;
        this.setData(obj);
    }
}

具体绑定参数，获取参数可参考

https://mp.weixin.qq.com/debu...