动态更改jQuery进度条的颜色

Question

我有一个 JQuery 进度条需要动态主题化（文档 在这里）：它将以红色开始，然后随着进度变为黄色，最后变为绿色。看起来这只是设置样式颜色属性的问题，但我似乎找不到适当的属性是什么。

- kerkeslager

---

你不能在更改进度条值时添加颜色吗？即 $( ".selector" ).progressbar({ value: 37 }).css('color', 'green'); - enoyhs

刚试了一下，不起作用。还是谢谢你的建议！ - kerkeslager

刚才意识到这其实是初始化进度条的代码。你可以尝试使用以下代码: $( ".selector" ).progressbar( "option", "value", 37 ).css('color', 'green'); 如果不起作用，可以在 .progressbar(..) 之前加上 css（虽然我觉得这不会有任何影响）。 - enoyhs

好的，借助您的帮助，我终于找到了谷歌搜索的关键词，以获取我想要的信息。显然，它是通过在内部div中设置背景颜色来实现的，因此，您必须使用$('#progressbar > div').css('background','red');而不是$('#progressbar').css('color','red');。感谢您的帮助；没有您，我无法找到答案！ - kerkeslager

Answer 1

jQuery UI 进度条没有明确设置的颜色；相反，它继承了你的 UI 主题中的 "widget header" 背景图像。因此，最简单的方法是设置覆盖背景的样式来更改颜色。例如：

.ui-progressbar.beginning .ui-progressbar-value { background: red; }
.ui-progressbar.middle .ui-progressbar-value { background: yellow; }
.ui-progressbar.end .ui-progressbar-value { background: green; }

（或者，您可以使用不同的背景图片。）然后，在设置进度条的值时，只需更改其类即可：

function updateProgressbar(current, target) {
    var value = parseInt(current / target * 100);

    $progressbar
        .progressbar("value", value)
        .removeClass("beginning middle end")
        .addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");
}

工作示例。

- Ben Blank