javascript - 用JS改变一个div的多个属性

Question

我有一个通过 js 函数获取数据的 Bootstrap 进度条

这是进度条

 <div class="progress-bar progress-bar-success" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%" id="progress">40%</div>

这是更新栏的js

function refreshProgress(){
        $('#progress').load('progress.php', function(){
           setTimeout(refreshTableData, 5000);
        });

我遇到的问题

js 只更新 div 的内容，但不知道如何更新 div 的值aria-valuenow="40" 和 style="width:40%"

我在想类似的事情

$("#progress").attr({
      "aria-valuenow" : "the progress.php value",
      "style" : "the progress.php value"
    });

但不确定如何去做，如果那是可以完成的方式。

更新

我的目标是 aria-valuemax="100"style="width:40%"以及一次调用 progress.php 同时更新的 div 内容

Answer 1

首先，您尝试更新 attr 的方式是好的。

$("#progress").attr({
  "aria-valuenow" : "the progress.php value",
  "style" : "the progress.php value"
});

您现在想要的是将您的 php 返回的数字以及您的属性 aria-valuenow

放入您的内容中

一种方法是使用服务器返回的 anwser 进行 xhr 调用

setInterval(
$.post(
  "progress.php",
  function(resp) {
       // first I check if my answer is 100 so I stop the interval
       if(resp === '100') {return false}
       //if not, I update my bar
       $("#progress").attr("aria-valuenow",resp).css('width',resp+'%').empty().text(resp+"%");
  }
),
5000);