gpt4 book ai didi

javascript - jQuery 进度条不工作

转载 作者:行者123 更新时间:2023-11-28 09:55:44 25 4
gpt4 key购买 nike

我是一个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com