for+if 循环给我带来了一些问题答案

【问题标题】：for+if loop doing me some problemsfor+if 循环给我带来了一些问题
【发布时间】：2018-11-29 09:53:49
【问题描述】：

我从 API 获得课程名称+成绩，尝试为每门课程构建 div，并在他旁边设置成绩，这对我有用。

我尝试根据每个等级的值来着色：

在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`)
  }
}

【问题讨论】：

你能发布你的“数据”对象吗
这样试试---> if (parseInt(data[i].examMark, 10) > 55)
试试parseInt(data[i].examMark) > 55
这不是描述性标题。请更改它。

标签： javascript css for-loop if-statement

【解决方案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`)
}

【讨论】：

【解决方案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>

【讨论】：