jQuery Progress Bar funktioniert nicht

Ich bin ein jQuery Neuling und ich versuche, eine dynamische jQuery Fortschrittsbalken zu erstellen. Was ich tun muss, ist, eine Reihe von Checkboxen auf einer Seite anzubieten, so dass, wenn der Besucher ein Kontrollkästchen aktiviert oder deaktiviert, der Wert in der Fortschrittsanzeige erhöht oder verringert wird. Außerdem muss ich den Besucher warnen, wenn er den Höchstbetrag (Prozentsatz) erreicht hat. Jede Hilfe wäre willkommen. Der folgende Code bindet das Click-Ereignis an die Fortschrittsleiste, aber es wird nicht richtig erhöht oder verringert und mein Max scheint nicht zu funktionieren. HierjQuery Progress Bar funktioniert nicht

ist, was ich habe:

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>

Quelle

2012-04-06 KenP

Sie können den Wert von jQuery UI Statusleiste ändern, indem

$("#budgetbar").progressbar("option", "value", 25);

mit

Dies setzt nur die Wert bis 25 (nicht um 25 erhöht). Um den Wert erhalten Sie

$("#budgetbar").progressbar("option", "value");

verwenden können, und Sie werden wahrscheinlich brauchen werde zu prüfen, ob die Checkbox :-)

geprüft würde ich es so machen (nicht getestet)

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) 
});

bearbeiten, die Warnung (es kann eine bessere Art und Weise sein):

$budgetbar.bind("progressbarchange", function(event, ui) { 
    var value = $budgetbar.progressbar("option", "value"); 
    if (value > 100) { 
     alert("You're over 100"); 
    } 
});

Quelle

2012-04-06 17:36:25 A123321

Dank Andrew, aber ich verstehe nicht, wo das in meinem Skript gehen würde? Wird der Wert erhöht oder verringert, wenn mehrere Kontrollkästchen aktiviert oder deaktiviert sind? – KenP

Das hat super funktioniert! Ich musste der #budgetbar nur einen Anfangswert hinzufügen: var $ budgetbar = $ ("# budgetbar"). Progressbar ({value: 0}); Das einzige Problem, das ich noch habe, warnt den Besucher, wenn er die 100% Grenze erreicht hat. Jedes Mal, wenn ich diese Zeile zum Skript hinzufüge, heißt es "$ budgetbar.progressBar ist keine Funktion": $ budgetbar.progressBar ({max: 100, textFormat: 'fraktion', callback: function (data) {if (data.running_value == data.value) {alert ("Budgetlimit erreicht!");}}}); Irgendwelche Gedanken zu dieser Linie? – KenP

Ich habe gerade eine Lösung geschrieben, die die Warnung richtig funktioniert, vielleicht können Sie das verwenden. –

Sie können den Code ziemlich viel zu vereinfachen, wenn Sie ass ign Werte auf Ihre input Kontrollkästchen:

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

Auf diese Weise müssen Sie sich nicht anders jede Checkbox behandeln. Stattdessen können Sie einen einzigen Handler für alle Ihre Optionen verwenden. Dies macht Debugging und Code-Wartung viel einfacher.

Zweitens, wie jede Option ändert, möchten Sie den Wert Gesamt Wert der progressbar zuweisen, nicht nur den Wert der angeklickten Option. Verwenden Sie anstelle von click, da dies nur ausgelöst wird, wenn ein Kontrollkästchen seinen Status ändert. (Kleiner Unterschied, ich weiß).

// 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); 
});

Auch sind Sie progressBar auf Ihren Anruf unter Verwendung der Parameter eingestellt werden (beachten Sie die Hauptstadt B). Der korrekte Name ist progressbar.

Beispiel: http://jsfiddle.net/DjWCz/2/

HTML: (beachten Sie den Klassennamen ändern und Wertschöpfung)

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

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

Quelle

2012-04-06 17:47:20

Als ich Ihren Code ausprobierte, verschwand der Fortschrittsbalken. Also fügte ich die folgende Zeile hinzu, aber es würde den Wert immer noch nicht erhöhen/verringern. $ ("# budgetbar"). Progressbar ({Wert: 0}); – KenP

Sie benötigen weiterhin den Initialisierungscode. Siehe oben Bearbeiten. Es funktioniert in der Feige. Verwenden Sie das als Referenz. –

Beachten Sie auch, dass ich die Klassennamen Ihrer Optionen geändert habe. Sie sollten alle die Option "class =" haben. –

versuchen, den Wert der zu speichern, Fortschrittsbalken für eine Variable, auf diese Weise können Sie den Wert erhöhen oder verringern um die richtige Berechnung zu haben.

wird es so etwas wie:

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

Außerdem müssen Sie prüfen, ob das Kontrollkästchen aktiviert ist, und nicht den „Klick“ -Ereignis verwenden. Versuchen Sie etwas wie das

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

Oder natürlich, müssen Sie eine ID zu Ihren Kontrollkästchen hinzufügen.

Hoffe es hilft!

Quelle

2012-04-06 17:51:18

Hier gehen Sie, hoffe es hilft.

Prost.

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

Quelle

2012-04-06 18:05:50

jQuery Progress Bar funktioniert nicht

Antwort

Verwandte Themen