Question

我正在尝试找到一种方法让我的进度条在完成输入设置后填满，但是所有我可以做的就是填写第一个输入后填写...抱歉我是有点像js noob所以忍受我！我有一个jsfiddle在

<form>
    <input class="moo" type="text" label="sauce" />
    <input class="moo" id="sloo" type="text" />
    <input class="moo" type="text" />
    <input class="moo" type="text" />
    <input class="moo" type="text" />
</form>
<div class="progress progress-striped active">
    <div class="bar"></div>
</div>


$(".moo").on('change keypress paste focus textInput input',function () {
    var width = (1 / 5 * 100);
    $(".bar").css("width", +width +"%");
})

Answer 1

我认为这就是你在寻找的东西：

$(document).ready(function () {
    $(".moo").change(function () {
        var completedInputs = 0;
        $(".moo").each(function () {
            if($(this).val() !== "") {
                console.log($(this).val());
                completedInputs++;
            }
        });
        $(".bar").css("width", (completedInputs*20)+"%");   
        if(completedInputs == 5) {
            if($(".bar").parent().hasClass("active")){
                $(".bar").parent().removeClass("active");
            }
        }else {
            if(!$(".bar").parent().hasClass("active")){
                $(".bar").parent().addClass("active");
            }
        }
    })
});

jsFiddle

Answer 2

这是一个非常详细的版本，可以检测“moo”输入的数量，并给出一个具有一定价值的百分比：

$(".moo").on('change paste', function () {
    var mooCount = $('input.moo').length;
    var myFilledMoosCount = $('input.moo').filter(function () {
        return $(this).val() === "";
    }).length;
    var width = ((1 / mooCount) * (mooCount - myFilledMoosCount)) * 100;
    var mymooPercent = width + "%";
    $(".bar").css("width", mymooPercent);
});

每条评论的编辑：不同的问题但是：

$(".moo").on('change paste', function () {
    var mooCount = $('input.moo').length;
    var myFilledMoosCount = $('input.moo').filter(function () {
        return $(this).val() === "";
    }).length;
    var width = ((1 / mooCount) * (mooCount - myFilledMoosCount)) * 100;
    var mymooPercent = width + "%";
    $(".bar").css("width", mymooPercent).text(mymooPercent);
    if (width === 100) {
        $(".bar").parent().removeClass("active");
    } else {
        $(".bar").parent().addClass("active");
    }
});

Answer 3

这是因为您总是设置相同的百分比。

尝试这样做：

$(".moo").on('change keypress paste focus textInput input',function () {
    var width = (1 / 5 * 100);

    var filled = $(".bar").data( "filled" ) || 0;
    $(".bar").data( "filled", ++filled );

    $(".bar").css( "width", (width * filled) +"%" );
});

在表单完成时更新jquery bootstrap进度条

3 个答案: