Question

我正在从API获取课程名称+成绩，试图为每个与他相邻的课程建立div，这对我有用。

我试图根据每个等级的颜色为其着色：

80之上的类名称为goodGrade，具有color: green

55

是badGrade，其中有color: red
和55-80，medGrade，颜色为黄色。

由于某种原因，除了badGrade或goodGrade之外，我所有年级的学生都获得了medGrade类的教育。因此，现在甚至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

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

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

Answer 2

或者使用您现有的代码，您只需将类名添加到数组的最后一个元素中（因为我们要追加div的值）$('.courses .course').last()

let data = [
    {
      courseName: 'English',
	    examMark: 55
    }, {
      courseName: 'Hindi',
	    examMark: 60
    }, {
      courseName: 'Science',
	    examMark: 90
    }
]
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>`);
  let clName = data[i].examMark > 80 ? 'goodGrade' : (data[i].examMark > 55 ? 'medGrade' : 'badGrade');
  $('.courses .course').last().find('.grade').addClass(clName)
}

.course .grade.medGrade {
  color: grey;
}

.course .grade.badGrade {
  color: red;
}

.course .grade.goodGrade {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='courses'></div>

for + if循环使我有些问题

2 个答案: