计数递增不能动态工作？

每次生成新的主题行时，是否可以动态更改计数器递增号码，如下所示？计数递增不能动态工作？

动态生成新的主题行时，计数递增数不会更改吗？

如果能够提供一个新的小提琴请，那将是非常赞赏，因为我还是新的编码。

谢谢！

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 class="number">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>

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



.number { 
    counter-reset: subsection; 
} 

.number:after { 
    counter-increment: section; 
    content: " " counter(section) ". "; 
}

JQuery的：

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

来源

2016-04-20 Dave

请尽量代码修剪到* *最少需要摄制。你的代码中有很多*事情与这个问题看似无关，但也有一些我认为不存在（例如数字的视图代码）。检查“[mcve]”以获得指导。 – Jeroen

您的问题无关，但淘汰赛与CSS counters。

您需要先重置section柜台，但你必须这样做的“容器”的水平：

.list { 
    counter-reset: section; 
} 

.number:after { 
    counter-increment: section; 
    content: " " counter(section) ". "; 
}

并添加“列表”类的ul：

<ul align="center" class="list" data-bind="foreach: classes">

演示http://jsfiddle.net/gqjgko04/

更多的Knocout解决方案将使用$index来生成您的标签，如：

<label data-bind="text: 'Subject: ' + ($index() + 1) + '.'"></label>

演示http://jsfiddle.net/gqjgko04/1/。

或者使用容器较少的语法来删除字符串连接：

<label>Subject: <!-- ko text: $index() + 1 --><!-- /ko -->. </label>

来源

2016-04-20 06:31:00 nemesv

计数递增不能动态工作？

回答

相关问题