data-* 属性更改时如何更新元素答案

【问题标题】：How to update element when data-* attribute changeddata-* 属性更改时如何更新元素
【发布时间】：2014-07-27 21:37:31
【问题描述】：

我有一个具有以下 css 样式的元素： #element:after { content: attr(data-percent); }

我正在尝试像这样使用 JQuery 更改 data-percent 属性 $('#element').data('percent', '50%');

属性变化，我可以通过console.log($('#element').data('percent'));查看，但它不会重绘，仍然包含旧属性。

我应该调用什么函数来更新这个元素？

【问题讨论】：

我认为您想更改实际属性：$('#element').attr('data-percent', '50%');。 data() 恰好拉入 data-* 属性，但与处理属性值不同

【解决方案1】：

jQuery 的data 采用属性as the initial value，但它并没有使用它来实际存储数据，而是缓存在内存中。

这允许存储您想要的任何值，而不是按照 HTML5 标准存储字符串。

如果你真的想使用属性来存储数据，使用

$('#element').attr('data-percent', '50%');

【讨论】：

【解决方案2】：

jQuery 不能引用和/或结束 :after 或 :before 伪元素。 CSS 元素似乎不会自动更新引用的 attr() 更改的内容。

我的建议是不要使用伪元素。

【讨论】：