使用e.target.dataset的问题

  在微信开发中我们经常会用到标签中属性的属性值,有时候我们通过 data-* 和 e.target.dateset 来获取属性值会出现一点小bug,即是调用出来的数据是undefined。

  1)方案1–去掉驼峰式命名,纯小写

<--HTML写法:-->
<button binTap="buy" data-textId="101"></button>
//JS调用:
buy:function(e){
    console.log(e.target.dataset.textId);
    //输出结果:undefined
}

  很多人可能会像我我一样卡在这里了,怎么找都找不到原因,怎么更改都是undefined。 
  其实,很简单! 
  那就是data后面的属性名写得不规范!在data后面的属性名是不能按照驼峰式的写法,只要把定义的属性名全部换成小写就没有问题了!如下:

<--HTML写法:-->
<button binTap="buy" data-productid="101"></button>
//JS调用:
buy:function(e){
    console.log(e.target.dataset.productid);
    //输出结果:101
}

  但这种方式有时也会存在 e.target.dataset={},此时productid=undefined,就需要换一种解决办法。。。

  2)console.log(e)查看

  e对象中包含两个对象分别是currentTarget和target,而真正的数据包含在currentTarget。 打印出e,找到你的数据,通过对象调用的方式即可。

 

 <view class="section-item-cell" bindtap="wxSortPickerViewItemTap" data-text="{{cell.platformId}}">
          <image class="logo" mode="{{item.mode}}" src="{{cell.iconUrl}}"></image>
          <text>{{cell.platformName}}</text>
          <text wx:if="{{cell.status==0}}" style="color:#999;">(系统维护中...)</text>
        </view>
      </view>
 wx.setStorageSync('platId', e.currentTarget.dataset.text);

 相关文章:

http://www.zhangxinxu.com/wordpress/2011/06/html5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E5%AF%B9%E8%B1%A1dataset%E7%AE%80%E4%BB%8B/

posted @   未知小未来  阅读(25802)  评论(1编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示