Javascript 如何使输入字段进度条与父div的100%一样全宽？

我的朋友帮我做了这个进度条。除了进度条不是父div的全宽之外，它工作得非常好。每次输入后的新宽度都是通过px中的JS添加的。我是javascript新手，需要帮助

这是小提琴-

我曾尝试将其转换为百分比，但尚未成功。初始宽度为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);
}

0%
选一个
一个
两个
$（'.track'）.change（函数（e）{
更新_进度（）；
});
函数更新_进度（）{
变量计数=$（'.track'）。长度；
变量长度=$（'.track'）.filter（函数（）{
返回此.value；
}).长度；
var done=数学地板（长度*（100/计数））；
$（'.perc'）.text（完成）；
$（'.meter'）。宽度（完成）；
}

这是因为您使用的是像素而不是百分比 您将宽度设置为25px，而不是25%

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

一定是

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

---

将函数中的最后一行

update\u progress

更改为：

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

---

谢谢大家的回答。我犯了这么愚蠢的错误。