微信小程序获取text标签中的值(文本 等)
2018-07-14 本文已影响242人
ChasenGao
需求:使用wx:for 根据数组中的数据渲染标签,再通过点击每个渲染出的标签返回该标签中的值。
使用了innerHTML 和innerText无效。于是换了一个思路。
代码如下:
<view class='u-wrp-recent'>
<text class='u-txt-recentTitle'>最近搜索</text>
<view class='u-ohr-recentItem' wx:for="{{arr3}}" bindtap='itemTap'>{{item}}</view>
</view>
我给渲染出的标签都添加了tap事件,并输出event
itemTap(e){
console.log(e)
}
这样点击效果如下图:
GIF1.gif
在输出的event中,我看到target中有一项dataset
image.png
于是我认为,只要把{{item}}的值在渲染时同时赋给data-* 就可以被调用了,我修改了一下代码如下:
<view class='u-wrp-recent'>
<text class='u-txt-recentTitle'>最近搜索</text>
<view class='u-ohr-recentItem' wx:for="{{arr3}}" bindtap='itemTap' data-text='{{item}}'>{{item}}</view>
</view>
itemTap(e){
console.log(e.target.dataset.text)
}
成功获取到值,效果图如下:
GIF3.gif