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

JS：如何基于API信息在div上触发CSS更改

1 个答案: