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');這兩種方式都可以