1

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

4 に答える 4

0

どうぞ、お役に立てば幸いです。

乾杯。

<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>
于 2012-04-06T18:05:50.307 に答える
0

を使用して、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");
    }
});
于 2012-04-06T17:36:25.930 に答える
0

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使用します。（小さな違い、私は知っています）。changeclick

// 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>
于 2012-04-06T17:47:20.723 に答える
0

プログレスバーの値を変数に保存してみてください。これにより、値を増減して正しい計算を行うことができます。

次のようになります。

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

また、チェックボックスがオンになっているかどうかを確認する必要があり、「クリック」イベントを使用しないでください。このようなことを試してください

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

またはもちろん、チェックボックスに ID を追加する必要があります。

それが役に立てば幸い！

于 2012-04-06T17:51:18.490 に答える