Javascript 是否可以更改引导进度条的图像样式？

我试图更改引导进度条的样式，并将当前百分比值放入其中。单击按钮可更改值（宽度），但不会更改背景或文本值

这是代码

$（函数（）{
$（文档）.ready（函数（）{
$（“#progress-bar1”）.css（“宽度”、“50%”）；
$（“#progress-bar1”）.attr（“aria valuenow”，“50%”）；
});
});
$（文档）.ready（函数（）{
$（“#btnsupmit”）。单击（函数（）{
$（'#progress-bar1'）.css（“宽度”，“10%”）；
$（“#进度条1”）.attr（“进度条危险”，“10”）；
});
});

50%
您必须修改“背景图像”css属性。在HTML代码中，尝试添加以下内容，例如：

<style>
    #progress-bar1{
        background-image: none;
        background-color: green;
    }
</style>


#进展-1{
背景图像：无；
背景颜色：绿色；
}
您必须修改“背景图像”css属性。在HTML代码中，尝试添加以下内容，例如：

<style>
    #progress-bar1{
        background-image: none;
        background-color: green;
    }
</style>


#进展-1{
背景图像：无；
背景颜色：绿色；
}
您需要添加类
进度条危险
，并将
文本
更新为10%：-

$("#btnSubmit").click(function(){
    $('#progress-bar1')   
     .addClass('progress-bar-danger')  // change to red
     .css("width", "10%")              // change width to 10%
     .attr('aria-valuenow', 10)        // change value to 10
     .text('10%');                     // change text to 10%
}); 

您需要添加类
进度条危险
，并将
文本
更新为10%：-

$("#btnSubmit").click(function(){
    $('#progress-bar1')   
     .addClass('progress-bar-danger')  // change to red
     .css("width", "10%")              // change width to 10%
     .attr('aria-valuenow', 10)        // change value to 10
     .text('10%');                     // change text to 10%
}); 

您可以创建jQuery插件来设置进度值


（函数（$）{
$.progressArray=[“危险”、“警告”、“信息”、“成功”]；
$.fn.setProgress=函数（percentVal）{
percentVal=percentVal==0？0:percentVal | | parseInt（this.attr（'aria-valuenow'），10）| | 0；
percentVal=数学最小值（100，数学最大值（0，percentVal））；
var progressIndex=Math.ceil（百分比值/25）-1；
返回此.css（'width'，percentVal+'%'））
.attr（'aria-valuenow'，percentVal）
.text（百分比值+“%”）
.removeClass（$.progressArray.map（cls=>'进度条-'+cls）.join（''）
.addClass（'progress-bar-'+$.progressArray[progressIndex]）；
};
$.fn.addProgress=函数（percentVal）{
返回此.setProgress（（parseInt（this.attr（'aria-valuenow'），10）| | 0）+percentVal）；
};
$.fn.setTooltipText=函数（文本）{
返回此.tooltip（'hide'）.attr（'data-original-title'，text.）.tooltip（'fixttitle'）；
};
$.fn.replaceTooltipText=函数（regex，repl）{
返回此.setTooltipText（this.attr（'data-original-title'）。替换（regex，repl））；
};
})（jQuery）；
$（函数（）{
$（'[data toggle=“tooltip”]'）。工具提示（{placement:'bottom'}）；
var$progressBar=$（“#progress-bar-1”）.setProgress（）；
$（'btn decr'）。在（'click'，function（）上{
$progressBar.addProgress（-parseInt（$（'#进度步骤'）.val（），10））；
});
$（'btn incr'）。在（'click'，function（）上{
$progressBar.addProgress（parseInt（$（'#进度步骤'）.val（），10））；
});
$（“#进度步骤”）。在（'keyup change'，function（）上{
var模式=/\d+（\.\d+）/g，替换=$（“#进度步骤”）.val（）；
$（“#btn decr”）.replaceTooltipText（模式，替换）；
$（'btn incr'）.replaceTooltipText（模式，替换）；
});
});
。工具提示内部{
字号：1.5em；
}

%
%
您可以创建jQuery插件来设置进度值


（函数（$）{
$.progressArray=[“危险”、“警告”、“信息”、“成功”]；
$.fn.setProgress=函数（percentVal）{
percentVal=percentVal==0？0:percentVal | | parseInt（this.attr（'aria-valuenow'），10）| | 0；
percentVal=数学最小值（100，数学最大值（0，percentVal））；
var progressIndex=Math.ceil（百分比值/25）-1；
返回此.css（'width'，percentVal+'%'））
.attr（'aria-valuenow'，percentVal）
.text（百分比值+“%”）
.removeClass（$.progressArray.map（cls=>'进度条-'+cls）.join（''）
.addClass（'progress-bar-'+$.progressArray[progressIndex]）；
};
$.fn.addProgress=函数（percentVal）{
返回此.setProgress（（parseInt（this.attr（'aria-valuenow'），10）| | 0）+percentVal）；
};
$.fn.setTooltipText=函数（文本）{
返回此.tooltip（'hide'）.attr（'data-original-title'，text.）.tooltip（'fixttitle'）；
};
$.fn.replaceTooltipText=函数（regex，repl）{
返回此.setTooltipText（this.attr（'data-original-title'）。替换（regex，repl））；
};
})（jQuery）；
$（函数（）{
$（'[data toggle=“tooltip”]'）。工具提示（{placement:'bottom'}）；
var$progressBar=$（“#progress-bar-1”）.setProgress（）；
$（'btn decr'）。在（'click'，function（）上{
$progressBar.addProgress（-parseInt（$（'#进度步骤'）.val（），10））；
});
$（'btn incr'）。在（'click'，function（）上{
$progressBar.addProgress（parseInt（$（'#进度步骤'）.val（），10））；
});
$（“#进度步骤”）。在（'keyup change'，function（）上{
var模式=/\d+（\.\d+）/g，替换=$（“#进度步骤”）.val（）；
$（“#btn decr”）.replaceTooltipText（模式，替换）；
$（'btn incr'）.replaceTooltipText（模式，替换）；
});
});
。工具提示内部{
字号：1.5em；
}

%
%
$（function（）{}）
是
$（document）的简写。ready
所以你有一个文档准备好了三次。
$（function（）{}）
是
$（document）的简写。ready
所以你有一个文档准备好了三次。