Question

以下代码计算从A +到E-的用户成绩点平均值。

<小时/> 在下面的小提琴中，是否有可能在平均成绩点旁边显示从A +到E-的等级。到目前为止，用户输入的等级从A +到E-，并将结果转换为平均成绩点。

如果可以提供一个新的小提琴，我将非常感激，因为我还不熟悉编码。

谢谢

HTML：

<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>

JQuery的：

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);

CSS：

@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;}

Answer 1

首先要获得您想要的数据绑定值data-bind="text: totalGrade"。

其次，您需要将gradeMapping数组移到class函数之外，以使其可以全局访问。

第三，你需要将GPA向后映射到等级。

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
    }
function Class(title, credits, letterGrade) {
    var self = this;
    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.totalGrade = ko.computed(function() {
        var totalWeightedGPA = 0,
            totalCredits = 0;
        var gradeLetter = null;
        $.each(self.classes(), function() {
            totalWeightedGPA += (this.gpa() * this.credits());
            totalCredits += (this.credits() * 1);
        });
        $.each(gradeMapping, function(letter, number) {
        		if(number == Math.round(totalWeightedGPA / totalCredits)){
            	gradeLetter = letter;
            }
        })
        return gradeLetter;
    });
    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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<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 data-bind="text: totalGrade"></span>
</h4>

这里有完整的jsFiddle示例：jsFiddle

如何动态地将数字数字转换为字母顺序？

1 个答案: