jQuery 進度條不工作
[英]jQuery Progress Bar Not Working
問題描述
我是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>
4 個解決方案
解決方案1
0 2012-04-06 17:36:25
您可以使用更改 jQuery UI 進度條的值
$("#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");
}
});
解決方案2
0 2012-04-06 17:47:20
如果您為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 />
這樣，您不必以不同方式處理每個復選框。 相反，您可以對所有選項使用單個處理程序。 這使得調試和代碼維護變得更加簡單。
其次，隨着每個選項的變化，您希望將總值分配給progressbar ，而不僅僅是單擊選項的值。 使用change而不是click ，因為這只會在復選框更改其 state 時觸發。（我知道有細微差別）。
// 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 。
示例： http://jsfiddle.net/DjWCz/2/
HTML：（注意class改名加值）
<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>
解決方案3
0 2012-04-06 17:51:18
嘗試將進度條的值存儲在變量上，這樣您就可以增加或減少其值以進行正確的計算。
它會是這樣的：
previousValue = 0;
$("#budgetbar").progressbar({
value: 10+previousValue
});
此外，您需要檢查復選框是否被選中，而不是使用“點擊”事件。 嘗試這樣的事情
if($('#checkboxId').is(':checked'))
或者，當然，您需要在復選框中添加一個 id。
希望能幫助到你！
解決方案4
0 2012-04-06 18:05:50
給你go，希望對你有幫助。
干杯。
<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>
為什么jQuery進度欄無法正常工作？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.