使用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()