javascript - 在表单完成时更新 jquery 引导进度条

Question

我正在尝试在完成一组输入后找到一种填充进度条的方法，但我所能做的就是在第一个输入完成后填充......对不起，我有点像js noob 所以请多多包涵！我有一个jsfiddle

http://jsfiddle.net/sKzjk/1/

<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) +"%" );
});