小程序里面没有js那样的id选择器,更改样式只能通过this.setData的方式赋值class的值。
但是在循环的时候就不太好用了,会同时更改掉所有样式:
< view wx:for = "{{item.list}}" > < view bindtap = "showContent" data-id = "{{item.id}}" > < view class = "title" >{{item.title}}</ view > </ view > < view class = "{{item.id == currentId ? 'contentShow' : 'contentHiden'}}" > < text >{{item.content}}</ text > </ view > </ view > |
点击“title”来控制“content”的显示隐藏,我这样写最多只能显示一条内容(点击当前“title”的时候,会将其余的全部隐藏),如果要控制到只改变当前点击部位的样式,有好的解决方案吗?
你对应的类`contentHiden` 的样式写对了吗?
<view class=
"{{item.hide ? 'contentHiden' : 'contentShow'}}"
>
<text>{{item.content}}</text>
</view>
这段代码在我的ios手机上没有起到“点击后隐藏/显示”的效果,我修改成以下代码才出现“点击后隐藏/显示”的效果,
请教可能的原因。
<view wx:if='{{item.hide}}'>{{item.content}}</view>
嗯嗯,受教了,谢谢。
动态setData就可以了,小程序嘛,你要抛弃jquery概念。
<view wx:
for
=
"{{item.list}}"
wx:key=
"{{index}}"
>
<view bindtap=
"showContent"
data-id=
"{{item.id}}"
>
<view class=
"title"
>{{item.title}}</view>
</view>
<view class=
"{{item.hide ? 'contentHiden' : 'contentShow'}}"
>
<text>{{item.content}}</text>
</view>
</view>
Page({
data: {
item: {
list:[
{ title:
'USA'
, content:
'美国'
, id: 0, hide:
false
},
{ title:
'CHN'
, content:
'中国'
, id: 1, hide:
true
},
{ title:
'BRA'
, content:
'巴西'
, id: 2, hide:
true
},
]
}
},
showContent:
function
(e){
var
that =
this
that.data.item.list[e.currentTarget.dataset.id].hide = !that.data.item.list[e.currentTarget.dataset.id].hide
that.setData({
item:that.data.item
})
}
})
我理解的你要的效果,如理解不对,请见谅。