Question

我在div中有六个问题，当用户回答问题时，进度条会根据填充的输入量的百分比进行调整，并具有模糊值。现在我觉得我有一个逻辑问题。在我的代码180 =进度条容器的宽度除以6个问题。我试图设置i以便您可以将i乘以180来为进度条的宽度设置动画0 * 180如果第一个的输入框被填入则应为0。我不希望宽度为0我希望宽度为180，这就是为什么我放arrayAnswerd =i+1;但是当我从所有框中删除输入文本时，进度条没有＆＃39 ; t为0，因为我假设arrayAnswerd = 1。

请帮我把这个进度吧。我必须调整i所以当没有任何内容填充时，宽度为0你会在演示的开头看到但是如果我输入2个输入并删除它们，宽度保持在180我相信{ {1}}不会返回0

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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 ......

进度条取决于用户输入

1 个答案: