JS: Как вызвать изменения CSS в div на основе информации API

Question

Я работаю над проектом, в котором мне нужно записать количество страниц, которые человек заполнил в онлайн-журнале.Для этого я использую JavaScript / jQuery для выполнения вызова API, а затем использую данные из вызова, чтобы стилизовать несколько делений на основе того, какие страницы были завершены.

Here's an example of the API I'm using:
[ {
"userId": 1,
"pagesCompleted": 10 },
{
"userId": 2,
"pagesCompleted": 8 },
{
"userId": 3,
"pagesCompleted": 5 }
]

Мне нужно написать функцию, котораявызывает API, просматривает пользователей и стили div в зависимости от того, сколько страниц было завершено из 10.

Вот HTML-код, с которым я работаю

<div class="pagesFinished"> </div>

Вот мой JSpage

function getJournal(userId) {
$.ajax({
        url: apiSource + "journal/users",
        dataType: "json"
    }).done(function(data) {

for (let i = 0 ; i < dataLength; i++) {

let buttonArray =(<button id="one">Page 1</button><button id="two">Page 2</button><button id="three">Page 3</button><button id="four">Page 4</button><button id="four">Page 4</button><button id="five">Page 5</button><button id="six">Page 6</button><button id="seven">Page 7</button><button id="eight">Page 8</button><button id="nine">Page 9</button><button id="ten">Page 10 </button>)

$(".pagesFinished").append(buttonArray);

Вот где мне нужно найти способ перебрать userIdArray, выяснить, какие страницы достигли пользователи, соответственно стилизовать div.Если пользователь прочитал определенную страницу, кнопки должны отображаться красным цветом.

Я сделал что-то вроде:

let lastPageCompleted = data[i].lastPageCompleted; //should be 10, 8, 5
$("#page" + lastPageCompleted).css('background-color', 'red');

Но это делает только последнюю кнопку красной (или 10-й, 8-йи 5-е кнопки).Мне нужно, чтобы все предшествующие им кнопки тоже стали красными.Как я могу написать цикл, который идет назад и применяет изменение CSS?

Answer 1

Вы можете попробовать это:

let lastPageCompleted = data[i].lastPageCompleted; //should be 10, 8, 5

for (let j = 1 ; j <= data[i].lastPageCompleted ; j++){
    $("#page" + j).css('background-color', 'red');
}