我是一个 jQuery 新手，我正在尝试构建一个动态 jQuery 进度条。我需要做的是在页面上提供一系列复选框，以便当访问者选中或取消选中复选框时，它将增加或减少进度栏上显示的值。此外，我需要在访问者达到最大金额(百分比)时提醒他们。任何帮助，将不胜感激。下面的代码将点击事件绑定(bind)到进度条，但它没有正确增加或减少，我的最大值似乎不起作用？
这是我所拥有的:
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。
希望对你有帮助!
关于javascript - jQuery 进度条不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10046940/