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='' data-product-size=''>按钮</a>

既然写上面方式那如何获取自定义属性呢?

请看下面:那种获取方式正确 通过打印输出:

var size1=$('.btn').data('product-size');

var size2=$('.btn').data('productSize');

var size3=$('.btn').data('productsize');

 console.log(size1);//

 console.log(size2)//

 console.log(size3)//undefined

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

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

巴特西

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

最新文章

热门文章