Javascript 如何使我的技能图表使用分数字母而不是百分比？

我到处寻找这种特殊的需求，但找不到任何好的来源。我有一个“技能”图表，显示我能完成的事情有多好。我的问题是，我不希望它显示一个百分比，而是一个字母等级（a+，a，B，C）

这是密码

window.requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
函数grow（）{
var元素='.bar'；
var i=1；
$（元素）。每个（函数（索引、值）{
变量百分比=$（this.attr（'data-percent'）；
var定时=百分比/100；
setTimeout（函数（）{
$（value）.css（'max-width'，+percent+'%'））.css（'transition'，timing+'s ease all'）；
$（值）。追加（“”+百分比+“”%）；
}，i*50）；
i++；
});
}
$（窗口）。加载（函数（）{
requestAnimationFrame（生长）；
});

.bar{
背景：白色；
边框顶部：1px实心#b4996d；
宽度：100%；
最大宽度：0；
高度：25px；
裕度：0 10px 0；
边框顶部样式：虚线；
}
纳姆先生{
线高：22px；
颜色：#b4996d；
字体大小：12px；
文本对齐：右对齐；
字体系列：“open_sansbold”；
}
.标签图{
线高：22px；
位置：绝对位置；
颜色：#333；
字体大小：12px；
字体系列：“open_sansbold”；
}
.持有人{
保证金：0自动；
宽度：100%；
}

网页设计
平面设计
Photoshop
HTML5
插图
印刷品

下面是一个简单的例子，说明@lux在评论中的建议。您可以在使用

data percent

属性获得的内容上添加条件，并且该属性处于启用状态：）

---

您需要一个函数，该函数接受

百分比

，并根据您使用的评分标准返回一个字母。（例如，

if（percentage<65）返回“F”

比我快。我只是建议将该逻辑放在grow（）中。如果百分比大于或小于百分比数字，则为变量指定字母等级。然后打印出该字母等级。我删除了[SOLVED]从编辑中的标题。将答案标记为正确答案会将其标记为已解决，这里的链接实际上有很大帮助。现在，我正试图找出如何使字母朝虚线扩展的方向移动。更改

.bar:before

的顶值，将其放置在您的网站上并更改e> 背景色至

白色

如果您希望文本悬停在虚线上。这非常有用！谢谢！不客气！如果您认为合适，请不要忘记将主题标记为已解决；）

$(function(){
  $('.bar').each(function(i,v){
    data = $(this).data('percent');
    // just an example, you can set whatever you wants as value and conditions
    if(data > 80){
      $(this).addClass('grade-Aplus');
    }
    else if(data <= 80 && data > 60){
      $(this).addClass('grade-A');
    }else{
      $(this).addClass('grade-B');
    }               
  });
});

.bar:before {content:""; width: 0; height: 30px; background: blue; position: absolute; left: 0; top: 0; transition: all 0.5s; }
.bar { position: relative; margin: 15px 0; padding: 7px 0 0 110px}

.bar.grade-Aplus:before { width: 100px; content: "A+"; color: #fff;}
.bar.grade-A:before { width: 80px; content: "A"; color: #fff}
.bar.grade-B:before { width: 30px; content: "B"; color: #fff}

/* and so on ... :) */