В настоящее время я работаю над приложением, в котором я вызываю данные из API, чтобы увидеть, насколько успехи ученика достигнуты в онлайн-журнале.Я использую jQuery, чтобы создать таблицу для каждого учащегося, чтобы показать его успеваемость - в основном, если ученик завершил определенную страницу, будет элемент, цвет фона которого теперь будет зеленым.
Вотпример типа API, с которым я работаю:
[
{ "userId": 101,
"name": "Student1",
"lastPageCompleted": 5 },
{ "userId": 102,
"name": "Student2",
"lastPageCompleted": 3 },
{ "userId": 103,
"name": "Student3",
"lastPageCompleted": 4 }
]
Вот код, с которым я сейчас работаю:
function getHighestPageCompleted() {
$.ajax({
url: "www.exampleapi.com/studentProgress",
dataType: "json"
}).done(function(data) {
for (let i=0; i < data.length; i++) {
let name = data[i].name;
let lastPageCompleted = data[i].lastPageCompleted;
let userId = data[i].userId;
//here, the function loops through and creates tables with ids that match the userId, and td that haves classes of page1, page2, page3, page4, and page5
let studentDashboard = ('<table id="' + userId + '"><tbody><tr><th>' + name + '</th><td class=\'page1\'></td><td class=\'page2\'></td><td class=\'page3\'></td><td class=\'page4\'></td><td class=\'page5\'></td></tr></table>');
//in a separate HTML file, a class called 'dashboardContainer' receives the studentDashboards
$(".dashboardContainer").append(studentDashboard);
//here's the part that is tricking me up -- I need to change the background color of each td according to how many pages they've finished
//this function is supposed to loop through each newly created table and color the background of each finished page div to green
for (let k=0; k < lastPageCompleted; k++) {
$("#" + userId + ".page" + k).css("background-color", "green");
}
}
})
}
Может кто-нибудь предоставить какие-либо указатели или предложения относительнопочему это не сработает?Я должен отметить, что когда я пытаюсь сделать следующее в Google Chrome, он действительно работает.Это просто не работает в функции.
$("#" + userId + ".page" + k).css("background-color", "green");