Question

我正在使用asp.net mvc，我已经使用jQuery放置了一个进度条。默认情况下，它的颜色是灰色但我想改变它的颜色。

此外，我已经阅读了类似的文章并尝试按照此link中的描述进行操作，但仍然没有成功。

Bellow是我的进度条脚本

  $("input[name='cmdName']").on('switchChange.bootstrapSwitch', function (event, state) {
    if ($(this).is(":checked")) {
            //alert("On");
            data = "On";
            $(function () {
                var progressbar = $("#progressbar"),
                progressLabel = $(".progress-label");

                progressbar.progressbar({
                    value: true,
                    change: function () {
                        $('.Acceptedbar').css('color', 'Green');
                        progressLabel.text(progressbar.progressbar("value") + "%");
                    },
                    complete: function () {
                        progressLabel.text("Complete!");
                    }
                });

                function progress() {
                    var val = progressbar.progressbar("value") || 0;

                    progressbar.progressbar("value", val + 2);

                    if (val < 99) {
                        setTimeout(progress, 80);
                    }
                }

                setTimeout(progress, 2000);
            });
          } else {
            //alert("Off");
            data = "Off";

            $(function () {
                var progressbar = $("#progressbar"),
                progressLabel = $(".progress-label");

                progressbar.progressbar({
                    value: true,
                    change: function () {
                        $('.Acceptedbar').css('color', 'Green');
                        progressLabel.text(progressbar.progressbar("value") + "%");
                    },
                    complete: function () {
                        progressLabel.text("Complete!");
                    }
                });

                function progress() {
                    var val = progressbar.progressbar("value") || 0;

                    progressbar.progressbar("value", val + 2);

                    if (val < 99) {
                        setTimeout(progress, 80);
                    }
                }

                setTimeout(progress, 2000);
            });
          }
          $.ajax({
            url: '@Url.Action("MultiGraph")',
            data: { data: data, search: search },

          });
        });

更新代码：

Bellow我在css

中添加了颜色

.AcceptedBar > .ui-progressbar-value {
   background: green;
}

任何帮助将不胜感激

Answer 1

有两个类需要应用css才能工作。请尝试以下方法：

.AcceptedBar> .ui-progressbar {
    background: green;
  }

.AcceptedBar> .ui-progressbar-value {
    background: white;
  }

如何更改jQuery进度条颜色？

1 个答案: