在 Jquery 进度条中显示百分比

Question

我的页面中有一个动态更新的进度条，我想在其中显示百分比，但我不知道怎么做。这是我页面上的进度条：

<div class="progress progress-striped active"> 
   <div id="prog" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
      <span id="progress-value"></span>
   </div> 
</div>

这是我更新进度条的 jQuery 代码：

$.ajax({    
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var pct = evt.loaded / evt.total;

                $("#prog").css({ width: pct * 100 + '%' });
                $('#progress-value').html(pct * 100);

            }
        }, false);

        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var pct = evt.loaded / evt.total;

                $("#prog").css({ width: pct * 100 + '%' });
                $('#progress-value').html(pct*100);
                if (pct === 1) {
                    $('#prog').addClass('hide');
                }
            }
        }, false);
        return xhr;
    },

它会更新进度条，因为我在数据加载期间看到它在进行，但它不显示百分比。我做错了什么？

Answer 1

我要做的是在元素上使用data- 属性（在这种情况下我将使用data-progress），以及CSS 中该元素的content: 属性。

例如JQuery：

$.ajax({    
xhr: function () {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var pct = evt.loaded / evt.total;

            $("#prog").css({ width: pct * 100 + '%' })
                      .attr('data-progress', pct * 100 + '%');

        }
    }, false);

    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var pct = evt.loaded / evt.total;

            $("#prog").css({ width: pct * 100 + '%' })
                      .attr('data-progress', pct * 100 + '%');
            if (pct === 1) {
                $('#prog').addClass('hide');
            }
        }
    }, false);
    return xhr;
},

所以在代码中，你会看到它在更新进度条的物理宽度的同时，也更新了数据属性。当然，CSS 会自动更新为新值。

在 CSS 中，它会是：

#prog[data-progress] {
    position: relative;
}
#prog[data-progress]:before {
    position: absolute;
    content: attr(data-progress);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* this sets the text to be exactly in the middle of the parent element */
}