Question

我希望当我的表单被某人填充时，进度条宽度增加20。

   <form  action="class/action.php" method="post">
     <div class="col-sm-3">
        <div class="form-group label-floating">
            <label class="control-label">Name </label>
            <input id="1" type="text" class="form-control pgbar" name="name" required>
        </div>
    </div>
   </form>

   <!-- Progress bar -->
      <div class="container">
        <div class="row">
            <div class="col-md-offset-6">
                 <div class="progress progress-line-primary ">
                     <div class="progress-bar" id="progressbar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 1%;"> </div>
                  </div>
             </div>
          </div>
      </div>

  //javascript      
$( "#progressbar" ).progressbar({
      value: 0
    });

$(".pgbar").change(function() {
    var pbVal = 0;
    if ($("#1").val().length > 0) pbVal += 20;
    if ($("#2").val().length > 0) pbVal += 20;
    if ($("#3").val().length > 0) pbVal += 20;
    if ($("#4").val().length > 0) pbVal += 20;
    if ($("#5").val().length > 0) pbVal += 20;
    $( "#progressbar" ).progressbar( "option", "value", pbVal );
    return false;
});

我不确定我的html或javascript是错的。感谢您的帮助，感激不尽。

Answer 1

希望您已经包含主题CSS文件，以便您可以首先看到您的进度条（代码如下）。

而且，说到样式，默认情况下style设置为1%。即使它有效，你也永远不会看到它。 width不必100%，但必须足够大才能看到。

接下来，更容易保留非空元素的数量，而不一定是最终进度条值，因为如果您稍后添加回复或删除回复，那么您的数学将是错误的。

然后，您只需将非空字段数除以字段数，并将其设置为value。您将value设置为option，但根据 docs ，那不是怎么做的：

( ".selector" ).progressbar( "value", 50 );

此外，只需循环遍历每个字段并检查其val()是非空的，而不是单独测试每个字段，这样更简单（也更具伸缩性）。

以下是取出不相关内容的示例：

＆＃13;

$(function() {
  $("#progressbar").progressbar({ value: 0  });
  
  // Apply the styling that is defined in the linked CSS stylesheet
  $("#progressbar").progressbar( "option", "classes.ui-progressbar", "highlight" );
});

// Us the ".on()" method instead of "change" as recommended by jQuery
$("input").on("change", function() {
  var count = 0;  // We won't be storing a final value, just a count of non-empty fields
  
  // Loop through the fields (better than testing one-by-one)
  $("input").each(function(idx, input){
    // Test the value for non-empty and increase the count if empty
    if($(input).val() !== "") { count++ };
  }); 
  
  // Now you can calculate the whole number representation of the % of completed fields
  var pbVal = (count / $("input").length) * 100;
  
  // Set the progress bar to the value
  $("#progressbar").progressbar("value", pbVal);
  
  // EXTRA CREDIT: When the progress = 100%, enable the submit button
  $("button").prop("disabled", pbVal !== 100);
});

＆＃13;

input { display: block; }
#progressbar { display:inline-block; width:75%; border-radius:25px; }
div { margin:1em 0;  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- Make sure you have the CSS linked to for visibility and styling -->
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<!-- **************************************************************************** -->

<form  action="class/action.php" method="post">
  <input id="1">
  <input id="2">
  <input id="3">
  <input id="4">
  <input id="5">            
</form>

<!-- Progress bar -->
<div>0%<span id="progressbar"></span>100%</div>
<button disabled>Submit</button>

＆＃13;

Answer 2

我不确定这个问题，因为我看不到一个有效的例子。这是一个有效的解决方案。

$("#progressbar").progressbar({
  value: 0
});
var $inputs = $(".form-group").children("input");
var totalInputs = $inputs.length;

  $inputs.on('keyup', function() {
    var pbVal = 0;
    $inputs.each(function(){
      if($(this).val().length > 0) pbVal ++;
    });

    $("#progressbar").progressbar("option", "value", (pbVal/totalInputs)*100)
  });

.container{
  width: 100%
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<form action="class/action.php" method="post">
  <div class="col-sm-3">
    <div class="form-group label-floating">
      <label class="control-label">1</label>
      <input id="input-1" type="text" class="form-control pgbar" name="name" required>
      <label class="control-label">2</label>
      <input id="input-2" type="text" class="form-control pgbar" name="name" required>
      <label class="control-label">3</label>
      <input id="input-3" type="text" class="form-control pgbar" name="name" required>
      <label class="control-label">4</label>
      <input id="input-4" type="text" class="form-control pgbar" name="name" required>
    </div>
  </div>
</form>

<!-- Progress bar -->
<div class="container">
  <div class="row">
    <div class="col-md-offset-6">
      <div class="progress progress-line-primary ">
        <div class="progress-bar" id="progressbar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> </div>
      </div>
    </div>
  </div>
</div>

输入表格时的进度条动画

2 个答案: