时间戳

首页 > 解决方案 > 如何使输入字段进度条全宽为父 div 的 100%？

javascript - 如何使输入字段进度条全宽为父 div 的 100%？

问题描述

我的朋友帮助我完成了这个进度条。它工作得很好，只是进度条不是父 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);
}

标签： javascriptjquerycss

解决方案

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

推荐阅读