javascript - for+if 循环帮我解决了一些问题

Question

我正在从 API 获取类(class)名称+成绩，尝试为每门类(class)构建 div，并在他旁边显示成绩，这对我有用。

我试着根据它的值(value)给每个等级上色:

• above 80 得到类名 goodGrade 有 color: green
• 在 55 下是 badGrade 有 color: red
• 和55-80，medGrade，黄色。

由于某种原因，除了 goodGrade 或 medGrade 之外，我的所有成绩都获得了 badGrade 类。所以现在即使是等级 98 也是红色的。

for(let i=0 ; i<data.length; i++) {
  $(`.courses`).append(`
    <div class="course"><b>${data[i].courseName}:</b>
      <span class="grade">${data[i].examMark}</span>
    </div>
  `) 

  if(data[i].examMark>55) {
    if(data[i].examMark>80) {
      $(`.courses .grade`).addClass(`goodGrade`)
    } else {
      $(`.courses .grade`).addClass(`medGrade`)
    }
  } else {
    $(`.courses .grade`).addClass(`badGrade`)
  }
}

Answer 1

这里的问题是你所有的类(class)都有相同的类(class)成绩。因此，此 js $('.courses .grade').addClass('goodGrade') 将添加到具有 grade 类的元素。你需要混合独特的类(class)。像这样

for(let i=0 ; i<data.length; i++){
   let course = '<div class="course" id="course_'+ i +'">'
   $('.courses #course_'+ i +' .grade').addClass(`goodGrade`)
}