[HTML]使用自定義屬性、並能通過 html5驗證：data-*

趕案子的時候因為時間緊迫，
常常直接使用 plan-U(ugly) 而割愛捨棄 plan-A~C，
導致維護麻煩，所以要常常祈求不需維護

例如下面這個 plan-U程式碼，當使用者沒有選取任何物件，
或選擇數量不同的物件時，img 會跟著抽換 ：

這樣子又醜又胖，且 attr寫死在js裏。

於是結案後回想這個問題，想到可以寫函式將他們包住，
富經驗的前端高高手朋友更建議可以將 img圖檔直接存入 html。
什麼意思？ 使用data-*
HTML 5 自訂屬性 -Inet@Web

可以在 <img>這個 tag裏新增自定義的屬性，
但隨意命名不會通過 html5的驗證，例如：
<img src='...' layer01='diamondDarkest.png' alt='...'>
這樣可以使用，但不會通過驗證。
改成 data-layer01就可以囉！
這樣一來也更加符合資料呈現放在html的原則，
接著將 attr()寫成 attr('src','data-layer01') 就更方便也更整齊囉！

依上方文章推測，也許還能這樣寫，類似物件導向的方式：
attr('src', dataset.layer01) 
最後這個寫法純屬臆測，尚未證實。

所以圖片的 .topImg img.txt2, .topImg img.txt3 原本html img tag中，
加入data-layer01 ~ data-layer04，後包入函示並給參數來調整src、display的內容，
就能解決讓程式碼更易讀、利於維護囉。