更新表單完成時jquery bootstrap進度條

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

那是因爲你設置了相同的百分比，始終。

嘗試這樣做：

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

Answer 2

我覺得這是什麼是你正在尋找：

$(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 3

這裏是一個非常詳細的版本，將檢測「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).text(mymooPercent); 
    if (width === 100) { 
     $(".bar").parent().removeClass("active"); 
    } else { 
     $(".bar").parent().addClass("active"); 
    } 
});