Изменить несколько атрибутов div с JS

Question

У меня есть индикатор выполнения начальной загрузки, который получает данные с помощью функции js

Вот индикатор выполнения

 <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, но не может понять, какобновить также значения 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%" asа также содержимое div для обновления одновременно с одним вызовом progress.php

Answer 1

Прежде всего, вы пытаетесь обновить свой attr.

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

Теперь вам нужно добавить число, возвращаемое вашим php, в ваш контент, а также в ваш атрибут. aria-valuenow

Один из способов сделать это - выполнить 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);

Answer 2

.attr примет объект, как вы используете в настоящее время. Это небольшая демонстрация, показывающая, что:

let value = 0;
const updateProgress = (value) => {
  const pb = $('#progress');
  value = value + 10;
  pb.attr({
    "aria-valuenow": value,
    "style": 'width:' + value + '%'
  }).text(value + '%');
  if (value <= 90) {
    setTimeout(updateProgress, 1000, value);
  }
}

updateProgress(value);

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="progress" style="height:10px; width:90%; margin: 10px auto; height: 20px">
  <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>
</div>

Answer 3

$.attr примет объект так, как вы предлагаете: https://api.jquery.com/attr/#attr-attributes

Установка нескольких атрибутов одновременно

Чтобы изменить атрибут alt и добавить атрибут title в полев то же время, передавайте оба набора имен и значений в метод одновременно, используя простой объект JavaScript. Каждая пара ключ-значение в объекте добавляет или изменяет атрибут:

$("#greatphoto").attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

Что вы также можете сделать, если jQuery не поддерживает это:

const update = {
  "aria-valuenow" : "the progress.php value",
  "style" : "the progress.php value"
}
for (const prop in update) {
  $("#progress").attr(prop, update[prop]);
}

В качестве альтернативы,если вы не хотите определять дополнительную константу, вы также можете использовать встроенный литерал объекта:

for (const [prop, value] of Object.entries({
    "aria-valuenow" : "the progress.php value",
    "style" : "the progress.php value"
  })
) {
  $("#progress").attr(prop, value);
}

Что-то вроде этих строк будет тем, что jQuery будет делать внутри себя в любом случае.