Question

我有一个有13个字段的表单。我想知道是否有任何快速方法可以使每次将文本输入字段时，每个字段的进度条增加8px？

使用类似$("#progress").css("width", 8);

的内容

Answer 1

百分比更好......

<div id="progress" class="progress-bar progress-bar-animated progress-bar-striped bg-
success" role="progressbar" style="width: 0%" aria-valuenow="0" aria valuemin="0" aria-valuemax="100"></div>


var size = 8
jQuery(function($) {
$('INPUT').on('keyup', function() {
   $('#progress').animate({width : size + '%' }, 500); 
    size = size + 8;
});
});

Answer 2

概念 - 使用课程＆＃39; track＆＃39;找到要跟踪的所有输入。然后使用过滤器来计算“跟踪”的数量。具有价值的对象。然后除以计算完成的百分比和向下舍入。完成的百分比可用于移动滑块或更新文本标签。或者，因为wuzz表示使用自举仪表。

注意：我的第一个版本试图跟踪keyup事件中填充的数据并填充数据填充属性。但是对于非常快速的类型和标签来说，这并不准确。这个解决方案更加强大。

HTML

<div>
  <span class='meter' style="display:inline-block;background:yellow;color:green;width:0;height:20px"></span>
  <span class='perc'>0</span>%
</div>
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<select class="track">
  <option value="">Choose One</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

JQUERY

$('.track').change(function(e) {
  update_progress();
});

// supports any number of inputs and calculates done as %
function update_progress() {
  var count = $('.track').length;
  var length = $('.track').filter(function() {
    return this.value;
  }).length;
  var done = Math.floor(length * (100 / count));
  $('.perc').text(done);
  $('.meter').width(done);
}

jsfiddle：https://jsfiddle.net/d9m7ufuv/

每当输入字段输入文本时，进度条宽度都会改变

2 个答案: