双重循环中内层循环点击时获取父元素的data-xx属性值

问题描述:两层循环遍历,给每个元素添加点击事件,但是这样的话就得获取每个元素的准确位置,那就必须得获取到外层循环的index值,但是e.currentTarget.dataset.属性名 只能获取到当前点击元素的属性值,所以在获取父元素的属性值时也是大费周章。想在网上找找看相关的资料,结果搜索出来一个类似的都没有。

先来看看wxml文件是怎么进行双重遍历的

<view class='setInterest' wx:for='{{group}}' wx:key='id' wx:for-item='item'>
    <view class='title'>{{item.type}}</view>
    <!--data-key 获取的是当前内层循环的index值,data-name 获取的是外层循环的index值 -->
    <view wx:for="{{item.content}}" bindtap="selectType" data-key='{{index}}' data-name='{{item.id - 1}}' wx:for-item='it' class="{{it.class}} {{it.state == 1 ? 'active-tag':''}}" wx:key='id'>
          <view class='specificText'>{{it.name}}</view>  
    </view>
</view>

下面是我的json数据, 双重数组

group:[
      {
        id: 1,
        type:'体育',
        content:[
          { 'name': '足球', 'state': '0', 'id': 11, 'class': 'specificType'},
          { 'name': '篮球', 'state': '0', 'id': 12, 'class': 'specificType'},
          { 'name': '英超联赛', 'state': '0', 'id': 13, 'class': 'specificType' },
          { 'name': '奥运会', 'state': '0', 'id': 14, 'class': 'specificType' },
          { 'name': '明星花边', 'state': '0', 'id': 15, 'class': 'specificType' },
          { 'name': '2018世界杯', 'state': '0', 'id': 16, 'class': 'specificType' },
          { 'name': '田径', 'state': '0', 'id': 17, 'class': 'specificType' },
          { 'name': '评论', 'state': '0', 'id': 18, 'class': 'specificType' },
          { 'name': '足球', 'state': '0', 'id': 19, 'class': 'specificType' },
          { 'name': '篮球', 'state': '0', 'id': 110, 'class': 'specificType' },
          { 'name': '英超联赛', 'state': '0', 'id': 111, 'class': 'specificType' },
          { 'name': '其他', 'state': '0', 'id': 112, 'class': 'specificType' }
        ]
      },
      {
        id: 2,
        type:'明星',
        content: [
          { 'name': '电影', 'state': '0', 'id': 21, 'class': 'specificType' },
          { 'name': '明星花边', 'state': '0', 'id': 22, 'class': 'specificType' },
          { 'name': '综艺', 'state': '0', 'id': 23, 'class': 'specificType' },
          { 'name': '好莱坞', 'state': '0', 'id': 24, 'class': 'specificType' },
          { 'name': '狗仔偷拍', 'state': '0', 'id': 25, 'class': 'specificType' },
          { 'name': '偶像练习生', 'state': '0', 'id': 26, 'class': 'specificType' },
          { 'name': '韩国', 'state': '0', 'id': 27, 'class': 'specificType' },
          { 'name': '评论', 'state': '0', 'id': 28, 'class': 'specificType' },
          { 'name': '整容', 'state': '0', 'id': 29, 'class': 'specificType' },
          { 'name': '刘嘉玲', 'state': '0', 'id': 210, 'class': 'specificType' },
          { 'name': '出轨消息', 'state': '0', 'id': 211, 'class': 'specificType' },
          { 'name': '其他', 'state': '0', 'id': 212, 'class': 'specificType' }
        ]
      },
      {
        id: 3,
        type:'其他',
        content:[
          { 'name': '社会', 'state': '0', 'id': 31, 'class': 'specificType' },
          { 'name': '教育', 'state': '0', 'id': 32, 'class': 'specificType' },
          { 'name': '军事', 'state': '0', 'id': 33, 'class': 'specificType' },
          { 'name': '科技', 'state': '0', 'id': 34, 'class': 'specificType' },
          { 'name': '时尚', 'state': '0', 'id': 35, 'class': 'specificType' },
          { 'name': '财经', 'state': '0', 'id': 36, 'class': 'specificType' },
          { 'name': '政治', 'state': '0', 'id': 37, 'class': 'specificType' },
          { 'name': '游戏', 'state': '0', 'id': 38, 'class': 'specificType' }
        ]
      }     
    ]

然后在事件处理函数中获取属性值并改变相应的数据

selectType: function(e) {
    // 通过获取数组里外层循环的id的值,假设为外层遍历的index
    let id = e.currentTarget.dataset.name;
    // 获取属性key的值即为内层遍历的index值
    let index = e.currentTarget.dataset.key;
    // 为了给点击事件添加样式,点击元素时让背景颜色改变,样式写在css里,不过不需要贴出来了,每个人都可以按照自己的想法去设计样式
    if (this.data.group[id].content[index].state == 1) {
      this.data.group[id].content[index].state = 0;
    } else if (this.data.group[id].content[index].state == 0){
      this.data.group[id].content[index].state = 1;
    }
    // 必须用setData方法才能改变data数据
    this.setData({
      group: this.data.group
    })
}

效果图如下,只会截静态图。。。

这里写图片描述

猜你喜欢

转载自blog.csdn.net/maid_04/article/details/80333121
今日推荐