用例:- 实际上，我想在同一页面上使用多个进度条，并且我希望每个进度条都具有不同的颜色。 我知道我们可以修改“ui-progressbar-value”CSS 类，但这会修改该页面中所有进度条的颜色。 那么有没有办法实现多种颜色的进度条。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
.ui-progressbar-value{
background: yellow !important;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar-2" );
$( "#progressbar-2" ).progressbar({
value: 30,
max:30,
classes: {
"ui-progressbar-value": "test"
}
}).addClass('test');
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
var progressbar2 = $( "#progressbar-3" );
$( "#progressbar-3" ).progressbar({
value: 30,
max:30
}).addClass("trst");
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
$('#progressbar-2').css({background: '#9CFF29'});
</script>
</head>
<body>
<p>
Progress 1
</p>
<div id = "progressbar-2" class="test"></div>
<p>
Progress 2
</p>
<div id = "progressbar-3"></div>
</body>
</html>最佳答案
$(function() {
var progressbar = $( "#progressbar-2" );
$( "#progressbar-2" ).progressbar({
value: 30,
max:30,
classes: {
"ui-progressbar-value": "test"
}
}).addClass('test');
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
var progressbar2 = $( "#progressbar-3" );
$( "#progressbar-3" ).progressbar({
value: 30,
max:30
}).addClass("trst");
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
$('#progressbar-2').css({background: '#9CFF29'});.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
#progressbar-2 > .ui-progressbar-value{
background: green !important;
}
#progressbar-3 > .ui-progressbar-value{
background: yellow !important;
}<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<p>
Progress 1
</p>
<div id = "progressbar-2" class="test"></div>
<p>
Progress 2
</p>
<div id = "progressbar-3"></div>
</body>
</html>Ref Css 子选择器 https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator .对于第一个进度条使用
#progressbar-2 > .ui-progressbar-value{
background: green !important;
}
第二次使用
#progressbar-3 > .ui-progressbar-value{
background: yellow!important;
}
关于jquery - 如何添加jquery进度条的颜色变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55880470/