我目前有一个绿色的进度条。我希望进度条根据值改变，理想情况下开始变红，然后逐渐变为黄色，然后当条形图几乎全部显示绿色时。演示= http://jsfiddle.net/R24pf/
<!DOCTYPE html>
<html>
<head>
<title>Bars for checklist</title>
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />
<script src="jqm/demos/js/jquery.js">
</script>
<script src="jqm/demos/js/jquery.mobile-1.3.2.min.js">
</script>
<script>
$(document).on('pagebeforeshow', '#checklist', function () {
$('input[type="checkbox"]').each(function () {
($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');
});
});
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked', true);
}
var total = $("#theList input[type=checkbox]").length;
var numChecked = $("#theList input[type=checkbox]:checked").length;
var prog = numChecked * 100 / total;
$("#progress").css("width", prog + "%");
});
</script>
</head>
<body>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Checklist with progress made</h1>
<div data-role="content">
<ul data-role="listview" id="theList" data-inset="true">
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" />
</div>
<a href="" class="detailListText">1</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" />
</div>
<a href="" class="detailListText">2</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" />
</div>
<a href="" class="detailListText">3</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" />
</div>
<a href="" class="detailListText">4</a>
</li>
</ul>
</div>
</div>
<div class="meter green nostripes">
<span id="progress" style="width: 0%"></span>
</div>
</div>
<style>
.detailListText {
margin: 0 0 0 20px;
}
.checkBoxLeft {
position: absolute;
left: 10px;
top: 28%;
width: 18px;
height: 18px;
background: #d9d9d9;
border-radius: 3px;
}
.hidden-checkbox {
display: none;
}
.not-checked {
background-position: 18px 0;
background-color: #d9d9d9;
}
.checked {
background-position: 0 0;
background-color: #6496bc;
}
.meter {
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
-webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.meter > span:after,
.animate > span > span {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
</style>
</div>
</body>
</html>
答案 0 :(得分：0)
这可以通过在“numChecked”变量下添加一个简单的if else语句来实现，当然这也可以使用数组甚至是switch语句来完成，但是这段代码可以让你顺利完成所以你可以在将来改进它。
示例： http://jsfiddle.net/7W72B/
if(numChecked == 1){
$("#progress").css('background','red');
} else if(numChecked == 2){
$("#progress").css('background','orange');
} else if(numChecked == 3){
$("#progress").css('background','yellow');
} else {
$("#progress").css('background','lime');
}
我希望这能让你开始，祝你好运。