我是一个 jQuery 新手，我正在尝试构建一个动态 jQuery 进度条。我需要做的是在页面上提供一系列复选框，以便当访问者选中或取消选中复选框时，它将增加或减少进度栏上显示的值。此外，我需要在访问者达到最大金额（百分比）时提醒他们。任何帮助，将不胜感激。下面的代码将点击事件绑定到进度条，但它没有正确增加或减少，我的最大值似乎不起作用？
这是我所拥有的：
Javascript：
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#budgetbar").progressbar({ value: 0 });
$(".option1").click(function () {
$("#budgetbar").progressbar({ value: 10 });
});
$(".option2").click(function () {
$("#budgetbar").progressbar({ value: 50 });
});
$(".option3").click(function () {
$("#budgetbar").progressbar({ value: 20 });
});
$(".option4").click(function () {
$("#budgetbar").progressbar({ value: 50 });
});
$("#budgetbar").progressBar({ max: 100, textFormat: 'fraction', callback: function(data) { if (data.running_value == data.value) { alert("Budget limit reached!"); } }} );
});
</script>
</head>
HTML：
<body>
<div id="budgetbar"></div>
<div>
<input type="checkbox" class="option1" />Expense 1 - $100,000<br />
<input type="checkbox" class="option2" />Expense 2 - $500,000<br />
<input type="checkbox" class="option3" />Expense 3 - $200,000<br />
<input type="checkbox" class="option4" />Expense 4 - $500,000<br />
* Max Expenses - $1,000,000
</div>
尝试将进度条的值存储在变量上，这样您就可以增加或减少其值以获得正确的计算。
它会是这样的：
previousValue = 0;
$("#budgetbar").progressbar({
value: 10+previousValue
});
此外，您需要检查复选框是否被选中，并且不要使用“click”事件。尝试这样的事情
if($('#checkboxId').is(':checked'))
当然，您需要在复选框中添加一个 ID。
希望有帮助！
就这样吧，希望对你有帮助。
干杯。
<script type="text/javascript">
$( document ).ready( function()
{
$( "#budgetbar" ).progressbar();
});
var currentProgress = 0;
function adjustProgress( checkbox )
{
if ( $( checkbox ).is( ":checked" ) )
{
currentProgress += parseInt( $( checkbox ).val() );
}
else
{
currentProgress -= parseInt( $( checkbox ).val() );
}
$( "#budgetbar" ).progressbar( "option" , "value" , currentProgress )
if ( currentProgress > 100 )
{
alert( "You have exceeded the maximum value of 100" );
}
}
</script>
<div id="budgetbar"/>
<div>
<input type="checkbox" class="option1" value="10" onclick="adjustProgress( this )"/>Expense 1 - $100,000<br/>
<input type="checkbox" class="option2" value="50" onclick="adjustProgress( this )"/>Expense 2 - $500,000<br/>
<input type="checkbox" class="option3" value="20" onclick="adjustProgress( this )"/>Expense 3 - $200,000<br/>
<input type="checkbox" class="option4" value="50" onclick="adjustProgress( this )"/>Expense 4 - $500,000<br/>
* Max Expenses - $1,000,000
</div>
如果为
input<input type="checkbox" class="option" value="10"/> Expense 1 - $100,000<br />
<input type="checkbox" class="option" value="50"/> Expense 2 - $500,000<br />
<input type="checkbox" class="option" value="20"/> Expense 3 - $200,000<br />
<input type="checkbox" class="option" value="50"/> Expense 4 - $500,000<br />
这样，您就不必以不同的方式处理每个复选框。相反，您可以为所有选项使用 single 处理程序。这使得调试和代码维护变得更加简单。
其次，随着每个选项的更改，您希望将total 值分配给 progressbar
，而不仅仅是单击选项的值。使用
change而不是
click，因为只有当复选框更改其状态时才会触发。 （细微差别，我知道）。
// The only handler you need:
$('.option').on('change', function() {
// The total
var total = 0;
// Sum the value of all checked checkboxes
$('.option:checked').each(function() {
total += parseInt($(this).val());
});
// Assign the value using the correct method:
$("#budgetbar").progressbar("value", total );
});
此外，您在通话中使用
progressBar
来设置参数（注意大写 B）。正确的名字是
progressbar。示例：
HTML：（注意类名更改和值添加）
<input type="checkbox" class="option" value="10"/> Expense 1 - $100,000<br />
<input type="checkbox" class="option" value="50"/> Expense 2 - $500,000<br />
<input type="checkbox" class="option" value="20"/> Expense 3 - $200,000<br />
<input type="checkbox" class="option" value="50"/> Expense 4 - $500,000<br />
脚本：
<script type="text/javascript">
$("#budgetbar").progressbar({
value: 0,
max: 100,
textFormat: 'fraction',
complete: function(event, ui) {
alert("Budget limit reached!");
}
});
$('.option').on('change', function() {
var total = 0;
$('.option:checked').each(function() {
total += parseInt($(this).val());
});
$("#budgetbar").progressbar("value", total );
});
</script>
$("#budgetbar").progressbar("option", "value", 25);
这仅将该值设置为 25（不增加 25）。要获得您可以使用的价值
$("#budgetbar").progressbar("option", "value");
您可能需要检查该复选框是否已选中:-)
我会这样做（未测试）
var $budgetbar = $("#budgetbar"); // It's no good to repeat selections
$(".option1").click(function () {
var thisValue = 25, // This checkbox' value
currentValue = $budgetbar.progressbar("option", "value"),
newValue;
if($(this).is(':checked')) {
newValue = currentValue + thisValue; // add
} else {
newValue = currentValue - thisValue; // subtract
}
$budgetbar.progressbar("option", "value", newValue)
});
编辑，警报（可能有更好的方法）：
$budgetbar.bind("progressbarchange", function(event, ui) {
var value = $budgetbar.progressbar("option", "value");
if (value > 100) {
alert("You're over 100");
}
});