jQuery:更新CSS内容属性

Question

我正在尝试使用jQuery动态设置CSS样式的content属性。在下面的Fiddle中，我希望输出在脚本执行后读到"100%完成“。

JS Fiddle

我试过了所有我能想到的CSS选择器的组合，但都失败了。

HTML

<div data-chart="1">
  <div class="chart"><span> Completed</span></div>
</div>

CSS

[data-chart="1"] .chart:before {
  content: "50%";
}

JS

// This obviously doesn't work
$('[data-chart="1"] .donut-chart:before').css('content', '100%');

谢谢您的指导！

Answer 1

如注释中链接的相关帖子上的一些答案所示，您可以在CSS中使用attr()函数：

[data-chart="1"] .chart:before {
  content: attr(data-before);
}

并更改内容如下：

$('[data-chart=1] .chart').attr('data-before', '100%');

https://jsfiddle.net/5jrL8g19/