今天在實作 data-attributes 時, 發現僅能用小寫存取. 一般我們對於較長的變數名, 會使用駝峰命名法 (camel naming), 不過在 data-attributes 會發生問題.
因為在 data-attributes 這樣的結構下, 都是以小寫方式來進行存取, 所以即使是使用 data-numberOfData 也會使用 data(“numberofdata”) 的方式來存取, 否則會 undefined.
若希望能用駝峰式名稱來存取, 則需要使用 data-number-of-data 的方式來寫 tag, 就可以使用 data(“numberOfData”) 來存取.
可以參考以下程式:
<a id="linka" data-string="a">link a</a><br>
<a id="linkb" data-stringOfData="b">link b</a><br>
<a id="linkc" data-string-of-data="c">link c</a><br>
// jQuery javascript
document.write("#linka.data(\"string\") = " + $("#linka").data("string")+ "<br>");
document.write("#linkb.data(\"stringOfData\") = " +$("#linkb").data("stringOfData")+ "<br>");
document.write("#linkb.data(\"stringofdata\") = " +$("#linkb").data("stringofdata")+ "<br>");
document.write("#linkc.data(\"stringOfData\") = " +$("#linkc").data("stringOfData")+ "<br>");
上面的執行結果, 第二組會是 undefined, 其他可以正常輸出 data-attributes 內容.
可以參考 codepen 上的執行結果:
https://codepen.io/timhuang/pen/ZRYzOR