进度条取决于用户输入

Posted 2023-05-08

【中文标题】进度条取决于用户输入

【英文标题】：Progress bar depending on user input

【发布时间】：2016-04-13 21:36:43

【问题描述】：

我在一个 div 中有六个问题，当用户回答问题时，进度条会根据已填写的输入量的百分比进行调整，并且具有模糊值。现在我觉得我有一个逻辑问题。在我的代码中 180 = 进度条容器的宽度除以 6 个问题。我正在尝试设置 i 以便您可以将 i 乘以 180 来动画进度条的宽度 0 * 180 如果第一个输入框已填写，则应为 0 。我不希望宽度为 0 我希望宽度为 180 所以这就是为什么我输入 arrayAnswerd =i+1; 但是当我从所有框中删除输入文本时，进度条不会下降到 0 宽度，因为我m 假设 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>

【参考方案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...

【讨论】：

酷。所以每次更改时，我都会重置arrayAnswerd = 0，然后计算有多少输入具有值并将其乘以比率。糟透了，我没想过这样做。感谢您的回答