jQuery 进度条不工作答案

【问题标题】：jQuery Progress Bar Not WorkingjQuery 进度条不工作
【发布时间】：2012-04-06 17:29:20
【问题描述】：

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

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

尝试将进度条的值存储在变量上，这样您就可以增加或减少其值以进行正确的计算。

会是这样的：

previousValue = 0;
$("#budgetbar").progressbar({ 
    value: 10+previousValue
});

另外，您需要检查复选框是否被选中，而不是使用“点击”事件。试试这样的

if($('#checkboxId').is(':checked'))

当然，您需要在复选框中添加一个 id。

希望对你有帮助！

【讨论】：

【解决方案2】：

给你，希望对你有帮助。

干杯。

<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>

【讨论】：

【解决方案3】：

如果将值分配给 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。

示例：http://jsfiddle.net/DjWCz/2/

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({ value: 0 });
你还需要初始化代码。请参阅上面的编辑。它在 jsfiddle 中工作。以此作为参考。
另外，请注意我更改了您的选项的类名。他们都应该有class="option"。
效果很好，代码也简单多了……谢谢！我必须解决的一个问题是将限制设置为 100。但是，根据您选择的框，所有复选框的总数可能会超过 100。我可以在访客达到 100 的限制时提醒他们并阻止他们或在他们超过限制时提醒他们吗？
您已经在更改处理程序中计算总数。您可以将代码放在那里以警告/防止超出预算。当您达到并超出预算时，此示例会向您发出警告：jsfiddle.net/DjWCz/3

【解决方案4】：

您可以通过使用更改 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");
    }
});

【讨论】：

谢谢 Andrew，但我不明白我的脚本会放在哪里？如果选中或取消选中多个框，这也会增加或减少值吗？
效果很好！我只需要像这样向#budgetbar 添加一个初始值： var $budgetbar = $("#budgetbar").progressbar({ value: 0 });现在我剩下的唯一问题是在访客达到 100% 限制时提醒他们。每次我将此行添加到脚本时，它都会显示“$budgetbar.progressBar 不是函数”： $budgetbar.progressBar({ max: 100, textFormat: 'fraction', callback: function(data) { if (data.running_value == data.value) { alert("达到预算限制！"); } }} );对这条线有什么想法吗？
我刚刚在上面发布了一个解决方案，它使警报正常工作，也许你可以使用它。
@JonathanPayne 我不断收到一条错误消息，提示 $budgetbar.progressbar 不是函数？这是我的代码： $( "#budgetbar" ).progressbar( "option" , "value" , newValue ) if (newValue > 100 ) { alert( "You have exceeded the maximum value of 100" ); }
我已将用于处理警报的代码添加到原始答案中。