Javascript 如何动态地将数字转换为字母等级？

下面的代码计算用户从a+到E-的平均分数。

---

在下面的提琴中，是否可以在坡度点旁边显示从a+到E-的平均坡度。到目前为止，用户输入从A+到E-的分数，然后将结果转换为平均分数

如果能提供一把新的小提琴，我将不胜感激，因为我对编码还是新手

多谢各位

HTML:

CSS:

---

首先，要在需要数据绑定的位置获取值，请将其绑定到

data bind=“text:totalGrade”

其次，您需要将gradeMapping数组移到

类

函数之外，以使其全局可访问

第三，你需要将平均成绩向后映射到成绩

var等级映射={
“A+”：15，
“A”：14，
“A-”：13，
“B+”：12，
“B”：11，
“B-”：10，
“C+”：9，
“C”：8，
"C-":7,，
“D+”：6，
"丁":五,，
“D-”：4，
"E+":3,，
"E":2,，
“E-”：1
}
功能类（职称、学分、等级）{
var self=这个；
self.title=ko.可观察（title）；
自我信用=可观察到的ko（信用）；
自身letterGrade=可观察的ko（letterGrade）；
self.gpa=ko.computed（函数（）{
返回等级映射[self.letterGrade（）]；
});
}
函数GpaCalcViewModel（）{
var self=这个；
self.classes=ko.observearray（）；
self.totalGPA=ko.computed（函数（）{
var totalWeightedGPA=0，
总学分=0；
$.each（self.classes（），function（））{
totalWeightedGPA+=（this.gpa（）*this.credits（））；
totalCredits+=（this.credits（）*1）；
})
返回totalWeightedGPA/totalCredits；
});
self.totalGrade=ko.computed（函数（）{
var totalWeightedGPA=0，
总学分=0；
var-gradeLetter=null；
$.each（self.classes（），function（））{
totalWeightedGPA+=（this.gpa（）*this.credits（））；
totalCredits+=（this.credits（）*1）；
});
$.each（等级映射、函数（字母、数字）{
if（数字==数学四舍五入（总权重EDGPA/totalCredits））{
等级字母=字母；
}
})
回信；
});
self.addClass=函数（）{
self.classes.push（新类（））；
}
};
var viewModel=新的GpaCalcViewModel（）；
应用绑定（视图模型）
@导入url(http://fonts.googleapis.com/css?family=Open+Sans:400700）；
@导入url(http://fonts.googleapis.com/css?family=Inconsolata:400);
*{文本呈现：优化易读性；}
正文，输入，文本区，选择，按钮{字体系列：'打开SAN'，无衬线；}
前{font-family:'incolata'，monospace；}
span{font size:18px；}
h1{字体大小：25px；}

添加一个新类
申请



主题：
1.
等级：









你的平均成绩是：


最终成绩：
您能否详细说明您的问题所在？您提供的小提琴似乎很好。@Matthewherbs分数平均值计算，但是在结果下面，代码还需要在“最终分数：（其中用户分数是从A+到E-”下面的字段中显示从A+到E-的分数结果。谢谢。啊，好的。我想问一下：你显然从你发布的代码中了解了编程——你为什么不使用一堆
if/else
语句呢？@MatthewHerbst我对编码有相当的了解。不过，我还是比较新的。因此，非常感谢您的帮助。谢谢大家!@戴夫，你能指出你的处境吗？你需要什么帮助？谢谢你的帮助！很好用！
<button class="button" data-bind="click: addClass">Add a New Class</button>
<button class="button">
Apply
</button>
<hr>

<ul align="center" data-bind="foreach: classes">
    <li>
        <label>Subject:</label><input type="text" data-bind="value: title" placeholder="E.g: English"/>
        <select disabled data-bind="value: credits">
        <option  selected data-bind="value: credits">1</option>
        </select>
        <label>Grade:</label>
        <input type="text" data-bind="value: letterGrade" placeholder="E.g: A+"/>
        <br>
        <br>
    </li>
</ul>



<hr />

<br>
<h4>
Your GPA is: <b><span data-bind="text: totalGPA"></span></b>
</h4>
<br>
<h4>
Final Grade: <span><i>(Where Users Grade is Calculated from A+ to E-)</i></span>
</h4>

function Class(title, credits, letterGrade) {
    var self = this;
    var gradeMapping = {
        'A+': 15,
        'A': 14,
        'A-': 13,
        'B+': 12,
        'B': 11,
        'B-': 10,
        'C+': 9,
        'C': 8,
        'C-': 7,
        'D+': 6,
        'D': 5,
        'D-': 4,
        'E+': 3,
        'E': 2,
        'E-': 1
    }
    self.title = ko.observable(title);
    self.credits = ko.observable(credits);
    self.letterGrade = ko.observable(letterGrade);
    self.gpa = ko.computed(function() {
        return gradeMapping[self.letterGrade()];
    });
}

function GpaCalcViewModel() {
    var self = this;
    self.classes = ko.observableArray();
    self.totalGPA = ko.computed(function() {
        var totalWeightedGPA = 0,
            totalCredits = 0;
        $.each(self.classes(), function() {
            totalWeightedGPA += (this.gpa() * this.credits());
            totalCredits += (this.credits() * 1);
        })
        return totalWeightedGPA / totalCredits;
    });
    self.addClass = function() {
        self.classes.push(new Class());
    }
};
var viewModel = new GpaCalcViewModel();
ko.applyBindings(viewModel);

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400);
* { text-rendering: optimizelegibility;}
body, input, textarea, select, button { font-family: 'Open Sans', sans-serif; }
pre { font-family: 'Inconsolata', monospace; }

span {font-size: 18px;}


h1 {font-size: 25px;}