使用jQuery操做data-attr的注意事項

今天又一次掉進這個坑裏面。

data-attr是HTML5裏面的一個新屬性（其實這東西都好多年了），方便CSS\JS去讀取DOM上面的屬性值。

jQuery在好久以前，就封裝了一個 $.fn.data() 的方法，而該方法是將數據存放在DOM內部的一個數據對象中。

在data-attr來了以後， $.fn.data() 也支持用來讀取DOM上面的data-attr，可是，它會緩存這個結果到DOM內部的數據對象，他會緩存，緩存，緩存。

後續對這個key的全部讀寫操做，其實都是操做的這個數據緩存，而DOM上面的data-attr並不會發生任何變化。

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

若是你有一些樣式，是但願同步這個data-attr的狀態的，用 $.fn.data() 來操做就會發生一些奇怪的事情（以前一次沒細看jQuery這塊的實現，只是發現出來的效果怪怪的），建議改用 $.fn.attr() 方法或者JS原生方法。

附：

• 爲了和 $.data() 作區分，我這裏用 $.fn.attr() 和 $.fn.data() 這種jQuery原型鏈上的方法來表示 $(selector).data()

• 同步發表於個人博客