美文网首页
微信小程序获取text标签中的值(文本 等)

微信小程序获取text标签中的值(文本 等)

作者: ChasenGao | 来源:发表于2018-07-14 13:56 被阅读242次

    需求:使用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

    相关文章

      网友评论

          本文标题:微信小程序获取text标签中的值(文本 等)

          本文链接:https://www.haomeiwen.com/subject/ibqypftx.html