取決於用戶輸入的進度條

Question

我在一個div中有6個問題，當用戶回答問題時，進度條根據填充的輸入量的百分比進行調整，並對模糊有價值。現在我認爲我有一個邏輯問題。在我的代碼180 =進度條容器的寬度除以6個問題。我試圖設置我，以便您可以乘以i 180次，以便爲進度條的寬度設置動畫0 * 180如果第一個輸入框的填充位置應該爲0。我不希望寬度爲0我希望寬度爲180，這就是爲什麼我把arrayAnswerd =i+1;，但是當我從所有的框中刪除輸入文本的進度條不下降到0的寬度，因爲我假設arrayAnswerd = 1。

請幫助我製作此進度條。我得調整i，所以當寬度爲0時什麼也沒有填滿你可以看到，在開始的演示中，但是如果我輸入2並刪除它們，寬度保持在180我相信i不會回到0

$(function(){ 
 

 
    var nFilledIN = 0; 
 
    var ratio = 0; 
 
    var questions = $(".part input") 
 
    var nQuestion = questions.length; 
 
    var started = false; 
 
    var arrayAnswerd; 
 

 
    questions.on("change", function(){ 
 
    questions.each(function(i){ 
 
     if($(this).val()){ 
 
     arrayAnswerd =i+1; 
 

 
     } 
 

 
    }) 
 
    console.log(arrayAnswerd) 
 
    if(arrayAnswerd == 0){ 
 
     // ratio = 1/ nQuestion 
 
     // arrayAnswerd = 1 
 
    } 
 
    else{ 
 
     // ratio = parseInt($(".progressQs").outerWidth())/nQuestion 
 
    } 
 
    ratio = parseInt($(".progressQs").outerWidth())/nQuestion 
 

 
    console.log(ratio) 
 

 
    $(".progressBarQs").animate({ 
 
     width : "+" + arrayAnswerd * ratio 
 
    }) 
 

 
    if($(this).val()){ 
 
     nFilledIN++ 
 
    }else if (nFilledIN > 0){ 
 
     nFilledIN-- 
 
    } 
 
    }) 
 
})

background: #3EABC0; 
 
} 
 
.form{ 
 
    /*width:80%;*/ 
 
    width: 1080px; 
 
    margin: 0 auto; 
 
    height:500px; 
 
    background: #ccc; 
 
    overflow: hidden; 
 
} 
 
.slider{ 
 
    width: 300%; 
 
} 
 
.part{ 
 
    width: 33.33%; 
 
    display: inline-block; 
 
    background: #e1f2f5; 
 
    height: 500px; \t 
 
    float: left; 
 
} 
 
.part2{ 
 
    background: blue; 
 
} 
 
.part3{ 
 
    background: orange; 
 
} 
 
.buttonWrapper{ 
 
    text-align: center; 
 
} 
 

 
.progressQs{ 
 
    width: 1080px; 
 
    background: #bbb; 
 
    margin: 0 auto; 
 
    /*padding: 10px 0px;*/ 
 
    /*overflow: hidden;*/ 
 
    position: relative; 
 
    background: lightgreen; 
 
} 
 
.progressBarQs{ 
 
    display: block; 
 
    width: 0px; 
 
    height: 20px; 
 
    /*content: "";*/ 
 
    /*position: absolute; 
 
    top: 0; left: 0; bottom: 0; right: 0;*/ 
 
    background: limegreen; 
 
    background-image: linear-gradient(
 
    -45deg, 
 
    rgba(255, 255, 255, .2) 25%, 
 
    transparent 25%, 
 
    transparent 50%, 
 
    rgba(255, 255, 255, .2) 50%, 
 
    rgba(255, 255, 255, .2) 75%, 
 
    transparent 75%, 
 
    transparent 
 
); 
 
    z-index: 1; 
 
    background-size: 50px 50px; 
 
    animation: move 2s linear infinite; 
 
    border-radius:0px 20px 20px 0px; 
 
    /*overflow: hidden;*/ 
 
    position: relative; 
 
} 
 
.reportPrecentage{ 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 50%; 
 
    top: -50%; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    background: red; 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="progressQs"> 
 
    <span class="progressBarQs"><span class="reportPrecentage"></span></span> 
 

 
</div> 
 
<div class="form"> 
 
    <div class="slider"> 
 
    <div class="part part1">part1 
 
     Name: <input type="text"> 
 
     Address: <input type="text"> 
 
     location: <input type="text"> 
 
     Gender: <input type="text"> 
 
     How Long: <input type="text"> 
 
     date: <input type="text"> 
 
    </div> 
 
    <div class="part part2">part2</div> 
 
    <div class="part part3">part3</div> 
 
    </div> 
 
</div> 
 
<div class="buttonWrapper"> 
 
    <button id="left">Left</button> 
 
    <button id="right">Right</button> 
 
</div>

Answer 1

如果你有

questions.on("change", function(){ 
    questions.each(function(i){ 
     if($(this).val()){ 
     arrayAnswerd =i+1; 
    } 

我會做：

questions.on("change", function(){ 
    arrayAnswerd = 0; 
    questions.each(function(i){ 
     if($(this).val()){ 
     arrayAnswerd++; 
     } 

這類似於你：

if($(this).val()){ 
    nFilledIN++ 
    }else if (nFilledIN > 0){ 
    nFilledIN-- 
    } 

，但我看不到你正在使用nFilledIN任何地方......