jQuery: индикатор выполнения с каждым кликом

Question

Поэтому я пытаюсь создать индикатор выполнения, который будет показывать номер текущего шага пользователя и индикатор выполнения, который будет заполняться или заполняться в зависимости от того, нажимает ли пользователь "следующий" или "назад".

вот мой 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);
    });

Это работает в некоторой степени, когда вы щелкаете далее, индикатор выполнения заполняется правильным количеством цвета заливки на основе общего количества указанных шагов (totalSteps = 30) и номер шага изменяется.

Но когда я снова нажимаю "Далее", ничего не меняется, а когда я нажимаю назад, номер шага меняется на 0, и индикатор выполнения становится пустым.

Поэтому мне нужно добавить чанк и изменить номер вверх при нажатии "Далее" и удалить чанк и изменить номер вниз при нажатии "назад".

Вот скрипка со всем кодом.

Спасибо за любую помощь.

Answer 1

Вы не обновляете ни одну из своих переменных. Попробуйте это (я также добавил немного логики, чтобы убедиться, что она не выходит за пределы):

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 всегда будет возвращать одно и то же значение. Попробуйте как следует.

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

ОБНОВЛЕННАЯ СКРИПКА