javascript - JS : How to trigger CSS changes on divs based on API information

Question

我正在做一个元素，我需要在在线日志中记录一个人完成的页数。为此，我使用 JavaScript/jQuery 进行 API 调用，然后使用调用中的数据根据​​已完成的页面设置一些 div 的样式。

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

我必须编写一个函数来调用 API，遍历用户，并根据 10 页中已完成的页数设置 div 样式。

这是我正在使用的 html

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

这是我的 JS 页面

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');
}