jQuery: 每次点击进度条

Question

所以我正在尝试创建一个进度条来显示用户当前的步数，以及一个根据用户单击 "next" 还是 "back" 来填充或取消填充的进度条。

这是我的 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) 填充正确数量的填充颜色，并且步数会发生变化。

但是当我再次单击 "next" 时，没有任何变化，当我单击返回时，步骤编号变为 0，进度条为空。

所以我需要它来添加块并在单击 "next" 时向上更改数字并在单击 "back" 时删除块并向下更改数字。

这是包含所有代码的 fiddle。

感谢您的帮助。

Answer 1

prog + prog 将始终 return 相同的值。尝试如下。

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

Answer 2

您没有更新任何变量。试试这个（我还添加了一些逻辑以确保它不会越界）：

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

jQuery: 每次点击进度条

jQuery: progress bar progressing with each click

jquery

progress-bar

progress