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，进度条为空。

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

以下是包含所有代码的 fiddle 。

感谢您的帮助。

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

<强> UPDATED FIDDLE

jQuery：每次单击都会显示进度条

2 个答案: