问题描述:两层循环遍历,给每个元素添加点击事件,但是这样的话就得获取每个元素的准确位置,那就必须得获取到外层循环的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
})
}
效果图如下,只会截静态图。。。