0

一連の入力を完了した後に進行状況バーがいっぱいになる方法を見つけようとしていますが、最初の入力がいっぱいになった後にいっぱいになるだけです...申し訳ありませんが、私は一種のjs初心者なので我慢してください！私は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 +"%");
})
4

3 に答える 3

3

これがあなたが探しているものだと思います：

$(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");
            }
        }
    })
});

jsフィドル

于 2013-05-21T22:20:14.257 に答える