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

问题描述

问 题

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

代码如下：

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

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

解决方案

最近在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会耗费性能，还有就是代码量更少了

这篇关于javascript - 小程序循环体内点击事件如何改变当前点击元素和兄弟的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！