如何使輸入字段進度條全寬為父 div 的 100%？

Question

我的朋友幫助我完成了這個進度條。 它工作得很好，只是進度條不是父 div 的全寬。 每次輸入后的新寬度是通過js在px中添加的。 我是 javascript 的新手，所以需要幫助。

這是小提琴 - https://jsfiddle.net/greysniper/fnkpu5gc/

我嘗試將其轉換為百分比，但尚未成功。 初始寬度為 11px，而填充每個輸入標簽后的新寬度也以 px 為單位。

<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="dont-track" style="background-color: blue;">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="dont-track" style="background-color: blue;">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="track">
<input class="dont-track" style="background-color: blue;">
<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>

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

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

Answer 1

那是因為您使用的是像素而不是百分比而不是 25%，而是將寬度設置為 25px

Answer 2

 $('.meter').width(done);

必須

 $('.meter').width(done+"%");

Answer 3

將 function update_progress中的最后一行更改為：

$('.meter').width(done + '%');