Question

我创建了一个表，该表将回显数据。该表有一个进度部分，该部分根据从数据库收集的数据显示完成的工作百分比。

我遇到的问题是进度栏。该栏本身不适用于表格的每一行。它似乎只显示第一行的百分比。

这是我的代码：

// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
  moveProgressBar();
});

// SIGNATURE PROGRESS
function moveProgressBar() {
  console.log("moveProgressBar");
  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 2500;

  // on page load, animate percentage bar to data percentage length
  // .stop() used to prevent animation queueing
  $('.progress-bar').stop().animate({
    left: progressTotal
  }, animationLength);
}

<!-- progress bar & progress count -->

<div id="block_container">
  <div class="percentext">
    <?php echo htmlspecialchars($pra['completed_sessions']);?> /
    <?php echo htmlspecialchars($pra['number_of_sessions']);?>
  </div>
  <div class="progressblock">
    <div class="progress-wrap progress" data-progress-percent="<?php print ((($pra['completed_sessions'])/($pra['number_of_sessions']))*100);?>">
      <div class="progress-bar progress">
      </div>
    </div>
  </div>
</div>

<!-- END OF progress bar & progress count -->

Answer 1

您需要分别将宽度应用于每个宽度。您正在选择所有它们，并将宽度设置为第一个的值。

// select all the elements that are progress bar
$("[data-progress-percent]")
  // loop over the jQuery collection
  .each( function () {
    // get the current one in the iteration
    var wrapper = $(this);
    // get the values
    var width = wrapper.width();
    var percentage = wrapper.data("progress-percent");
    // determine the width of the bar
    var barWidth = width * percentage/100;
    // find the element to animate inside the current wrapper
    wrapper
     .find(".progress-bar")
       .stop()
       .animate({width: barWidth + "px"}, 1000);
  });

.progress-wrap {
  width: 80%;
  border: 2px solid black;
  margin: 1em;
}

.progress-bar {
  height: 20px;
  width: 0px;
  overflow: hidden;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="progress-wrap progress" data-progress-percent="45">
  <div class="progress-bar progress">
  </div>
</div>

<div class="progress-wrap progress" data-progress-percent="15">
  <div class="progress-bar progress">
  </div>
</div>

<div class="progress-wrap progress" data-progress-percent="95">
  <div class="progress-bar progress">
  </div>
</div>

Answer 2

<script>
    completed = /*get completed*/;
    total = /*get total*/;
    percentage = completed / total;
    bar = document.getElementById('progress-bar progress'); //Use id and not class
    bar.style.width = percentage+"%";
</script>

表中的进度栏

2 个答案: