javascript - How to update element when data-* attribute changed

Question

I have an element with following css style: #element:after { content: attr(data-percent); }

I'm trying to change data-percent attribute with JQuery like this $('#element').data('percent', '50%');

Attribute changes, I can check it by console.log($('#element').data('percent'));, but it won't redraw and still contains old attribute.

What function should I call to make this element updated?

Answer 1

jQuerydata将属性作为初始值，但它并不使用它来实际存储数据，而是缓存在内存中。

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

如果您确实想使用该属性来存储数据，请使用

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

Answer 2

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

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