javascript - 进度条取决于用户输入

Question

我在一个 div 中有六个问题，当用户回答问题时，进度条会根据已填写的输入量的百分比进行调整，并且对模糊具有值(value)。现在我觉得我有逻辑问题。在我的代码中，180 = 进度条容器的宽度除以 6 个问题。我正在尝试设置 i 以便您可以将 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;	
  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...