data-*设置自定义属性注意事项一

本人才疏学浅,偶遇一个data自定义属性应当注意的小问题,随笔记下.

1.看下面代码:首先在a标签设置自定义两个属性

<a class="btn" href="javascript:;" data-id='1' data-productSize='2'>按钮</a>

　　

第一个输出为1
var id= $('.btn').data('id');
   console.log(id);//输出1

　　第二个输出为undefined
   var size=$('.btn').data('productSize');
   console.log(size);//输出undefined

同样的代码为什么会出现不同的结果
原因:在data-*自定义属性中 出现两个英语单词是要用" - "连接起来 如下:

<a class="btn" href="javascript:;" data-id='1' data-product-size='2'>按钮</a>
既然写上面方式那如何获取自定义属性呢?
请看下面:那种获取方式正确 通过打印输出:
var size1=$('.btn').data('product-size');
var size2=$('.btn').data('productSize');
var size3=$('.btn').data('productsize');
 console.log(size1);//2
 console.log(size2)//2
 console.log(size3)//undefined

总结一下:①用data-*设置自定义属性时,出现两个字母以上用" - "连起来 如:正确:data-product-size    错误:data-productSize

　　　　 ②获取自定义属性时,应该是 $('.btn').data('product-size')或$('.btn').data('productSize');这两种方式都可以