javascript动态更改背景
javascript动态更改背景
提问于 2016-11-03 00:32:03
我把这个进度条修好了。我唯一有问题的是在选中许多复选框时更改颜色.
0-3 background = red
4-7 = yellow
8-10 = Green我的CSS
.progress-bar-wrapper .progress-bar-filling {
height: 100%;
color: #fff;
text-align: right;
width: 0;
background-color: #39b54a;
border-radius:20px;
}
.progress-bar-wrapper .progress-bar-percent {
font-weight: 400;
font-family: sans-serif;
color: #626162;
padding-top: 6px;
display: block;
}我的HTML / Javascript
<div id="yyy">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<div>
<script>
window.onload = xxx;
function xxx()
{
var zzz = $(".check_id:checked").length;
document.getElementById("insert").innerHTML = zzz
$(document).ready(function(){
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300)jFiddle在这里，提琴曲，谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-03 00:42:15
你可以直接查一下没有。通过$(".check_id:checked").length选中复选框，并仅更改background-color css属性。
<div id="yyy">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<div>
<script>
window.onload = xxx;
function xxx()
{
var zzz = $(".check_id:checked").length;
document.getElementById("insert").innerHTML = zzz
$(document).ready(function(){
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300)
//.html(percent + "% ");
$('.progress-bar-percent').html( percent + "% " );
// calculate color
if($(".check_id:checked").length <= 3)
{
$("#progress-bar-filling").css("background-color","red");
}
else if($(".check_id:checked").length >= 4 && $(".check_id:checked").length <= 7 )
{
$("#progress-bar-filling").css("background-color","yellow");
}
else if($(".check_id:checked").length >= 8 && $(".check_id:checked").length <= 10 )
{
$("#progress-bar-filling").css("background-color","green");
}
}
var complete = zzz+'0';
progress(complete, $('#progress-bar'));
})
}
</script>
<p id="insert"></p>
<div class="progress-bar-wrapper">
<div id="progress-bar">
<div id="progress-bar-filling" class="progress-bar-filling"></div>
</div>
<div class="progress-bar-percent"></div>
</div>Stack Overflow用户
发布于 2016-11-03 00:42:10
由于您已经知道了:checked复选框的数量，您可以添加3个新类(在css中)来设置进度栏的背景色：
.progress-bar-wrapper .progress-bar-filling.fill0 {
background-color: red;
}
.progress-bar-wrapper .progress-bar-filling.fill1 {
background-color: yellow;
}
.progress-bar-wrapper .progress-bar-filling.fill2 {
background-color: #39b54a;
}在javascript代码中--首先--删除所有fill0,fill1,fill2类，然后--根据您的数字--只添加相关的类：
$('.progress-bar-filling').removeClass('fill0 fill1 fill2');
if (zzz <= 3) {
$('.progress-bar-filling').addClass('fill0')
} else if (zzz <= 7) {
$('.progress-bar-filling').addClass('fill1')
} else {
$('.progress-bar-filling').addClass('fill2')
}下面是一个有用的例子：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40391979
复制相关文章
相似问题
腾讯云开发者
