使用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/
使用e.target.dataset的问题的更多相关文章
- ie9及以下不兼容event.target.dataset对象
ie9及以下不兼容event.target.dataset对象,请使用event.target.getAttribute('data-xxx')
- event.target.dataset
dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象,DOMStringMap是HTML5一种新的含有多个名-值对的交互变量. 1.event.target.d ...
- 小程序踩坑之获取不到e.target.dataset的值
在页面与js传值中我们经常用到data-id="1"的方式,然后通过e.target.dataset.id取id的值今天在获取值时怎么也取不到,后来发现e对象有currentTar ...
- 微信开发e.target.dataset取值undefined
替换为: e.currentTarget.dataset.current
- 偶遇event.target
今天在学习其他人代码的时候见到了event.target.nodeName,event.target.dataset.刚开始是一头雾水,便google一下.发现大多数给出的词条都是有关jQuery事件 ...
- event.target的第一次
今天在学习其他人代码的时候见到了event.target.nodeName,event.target.dataset.刚开始是一头雾水,便google一下.发现大多数给出的词条都是有关jQuery事件 ...
- 微信小程序 --- e.currentTarget.dataset.id 获取不到值
直接代码 wxml代码片段 <view class='ranksList' wx:for="{{ranksLb}}"> <view class='ranksLis ...
- 深入理解dataset及其用法
DataSet是ADO.NET的中心概念.可以把DataSet当成内存中的数据库,DataSet是不依赖于数据库的独立数据集合.所谓独立, 就是说,即使断开数据链路,或者关闭数据库,DataSet依然 ...
- change事件传值方式 data-set 以及复杂数据类型 可以动态创建对象push到数组里面
<template> <div> <!-- <div class="banner"> <a-breadcru ...
随机推荐
- 1176: [Balkan2007]Mokia
1176: [Balkan2007]Mokia 链接 分析 三维偏序问题,CDQ分治论文题. 代码 #include<bits/stdc++.h> using namespace std; ...
- beego orm
http://beego.me/docs/mvc/model/overview.md go get github.com/astaxie/beego/orm Simple Usage package ...
- 浅谈 kubernetes service 那些事 (下篇)
欢迎访问网易云社区,了解更多网易技术产品运营经验. 五.K8s 1.8 新特性--ipvs ipvs与iptables的性能差异 随着服务的数量增长,IPTables 规则则会成倍增长,这样带来的问题 ...
- 「暑期训练」「基础DP」 Common Subsequence (POJ-1458)
题意与分析 很简单:求最长公共子序列. 注意子序列与子串的差别:一个不连续一个连续.一份比较好的参考资料见:https://segmentfault.com/a/1190000002641054 状态 ...
- 寻找完全数(C++)
[问题描述] 输入一个大于 1 的正整数 n,请你将大于 1 和小于或等于 n 的所有完全数输出.所谓完全数就是因子(不算其本身)之和等于它本身的数.例如 1+2+4+7+14=28,所以 28 是完 ...
- Android之Activity小结
Acitivity: 四种状态:活动状态.暂停状态.停止状态.销毁状态 四种加载模式:standard ,singleTop,singleTask,singleInstance: 七大方法:onCre ...
- [转]Hibernate入门:批量插入数据
转自:http://blog.csdn.net/xiazdong/article/details/7709068 一般如果要插入100万条数据,则会写如下代码: package org.xiazdon ...
- ng2 搭建本地开发环境
git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install npm start h ...
- JavaWeb 基于Session的用户登陆注销实现
通过Session来存储用户的部分登陆信息来验证用户是否在线,这应该时最容易实现的一种Web端方案,本文以SSM(Spring.SpringMVC.myBatis)框架为载体,来具体实现这套登陆系统. ...
- Java IO流-File类的使用示例-创建文件夹和文件的正确方法
当创建一个文件时,比如:E:\\test\\test.txt,此时若文件夹test不存在,那么直接创建文件会出错,故首先要判断文件夹是否存在,不存在的话要首先创建文件夹. public class F ...