jQuery: Fortschrittsbalken mit jedem voran klicken

Question

so versuche ich, einen Fortschrittsbalken zu erstellen, die eine Anwender aktuelle Schrittnummer und einen Fortschrittsbalken angezeigt, die füllen oder unfill basierend darauf, ob der Benutzer klickt auf „Weiter“ oder „Zurück“ .

hier ist meine jQuery:

var totalSteps = 30; 
    var barWidth = $('.barWrap').width(); 
    var prog = barWidth/totalSteps; 
    var currentValue = parseInt($("#stepNum").text(),10); 
    var nextValue = currentValue + 1; 
    var prevValue = currentValue - 1; 

    // console.log(perc); 

    $('#bar').css('width', prog); 

    $('#nextNav').click(function(){ 
     $('#bar').css('width', prog + prog); 
     $("#stepNum").text(nextValue); 
    }); 

    $('#backNav').click(function(){ 
     $('#bar').css('width', prog - prog); 
     $("#stepNum").text(prevValue); 
    }); 

Es funktioniert etwas, wenn Sie auf neben der Fortschrittsbalken mit der richtigen Menge an Füllfarbe auf die gesamten Schritte angegeben (totalSteps = 30) und die Schrittnummer ändert sich basierend füllt .

Aber als ich „next“ wieder nichts ändert klicken und wenn ich die Schrittzahl ändert sich auf 0 klicken zurück und die Statusleiste ist leer.

Also muß ich die Brocken hinzuzufügen und die Nummer zu ändern, wenn „weiter“ geklickt wird und die Chunk zu entfernen und die Nummer zu ändern, wenn nach unten „zurück“ geklickt wird.

Hier ist ein fiddle mit dem ganzen Code.

Danke für jede Hilfe.

Answer 1

Sie sind nicht alle Ihre Variablen zu aktualisieren. Versuchen Sie, diese (Ich habe auch eine gewisse Logik, um sicherzustellen, es nicht von Grenzen geht out):

https://jsfiddle.net/4xdbopgn/5/

var totalSteps = 30; 
var barWidth = $('.barWrap').width(); 
var prog = barWidth/totalSteps; 
var currentValue = 1; 
var maxValue = 30; 

$('#bar').css('width', prog); 

$('#nextNav').click(function(){ 
    currentValue++; 
    if (currentValue > maxValue) 
     currentValue = maxValue; 

    $('#bar').css('width', prog * currentValue); 
    $("#stepNum").text(currentValue); 
}); 

$('#backNav').click(function(){ 
    currentValue--; 
    if (currentValue < 1) 
     currentValue = 1; 

    $('#bar').css('width', prog * currentValue); 
    $("#stepNum").text(currentValue); 
}); 

Answer 2

prog + prog immer gleichen Wert zurück. Versuchen Sie wie folgt.

var totalSteps = 30; 
var barWidth = $('.barWrap').width(); 
var prog = barWidth/totalSteps; 
var currentValue = parseInt($("#stepNum").text(), 10); 

$('#bar').css('width', prog); 

$('#nextNav').click(function() { 
    currentValue++; 
    currentValue = currentValue > totalSteps ? totalSteps : currentValue; 

    $('#bar').css('width', prog * currentValue); 
    $("#stepNum").text(currentValue); 
}); 

$('#backNav').click(function() { 
    currentValue--; 
    currentValue = currentValue < 0 ? 0 : currentValue; 

    $('#bar').css('width', prog * currentValue); 
    $("#stepNum").text(currentValue); 
}); 

UPDATED FIDDLE