如何为标签文本附加自动递增的数字

Question

我正在实现一个扩展表单函数，其中有一个标签文本（用html标记），我希望包含一个要递增的数字。

因此，每次扩展/克隆表单时，扩展表单中的标签文本都会显示学生1，学生2 ......。我可以被告知如何做到这一点吗？

＆＃13;

＆＃13;

var counter = 0;
function moreFields(val1, val2, val3) {
	counter++;
	var newField = document.getElementById(val1).cloneNode(true);
	newField.id = '';
	newField.style.display = 'block';
	var newFields = newField.querySelectorAll('[name], [id], [for]');
		for (var i=0;i<newFields.length;i++) {
		    var theNames = newFields[i].name
		    if (theNames)
			    newFields[i].name = "data[" + val3 + "][" + counter + "][" + theNames + "]";
	            var theNames2 = newFields[i].id;
	            if (theNames2)
	                    newFields[i].id = theNames2 + counter;
	            var theNames3 = newFields[i].htmlFor;
	            if (theNames3)
	                    newFields[i].htmlFor = theNames3 + counter;
		}			
	var insertHere = document.getElementById(val2);
	insertHere.parentNode.insertBefore(newField,insertHere);	
}

＆＃13;

<span id="readroot" style="display: none">
<div class="row">
	<div class="col-lg-3">
		Grade 6
	</div>
	<div class="col-lg-3">
		Male
	</div>
	<div class="col-lg-6">
		<div class="row">
			<div class="col-lg-12">
                <!-- Student number needs to increase when a new form is extended. -->
				<label>Student 1</label> 
			</div>
		</div>
		<div class="row">
			<div class="col-lg-6">
				<label for="display_student_1_grade">Grade</label>
				<div id="display_student_1_grade"></div>
			</div>
			<div class="col-lg-6">
				<label for="display_student_1_gender">Gender</label>
				<div id="display_student_1_gender"></div>
			</div>
		</div>
	</div>	
</div>
<input class="btn btn-default" type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</span>
<span id="writeroot"></span>		
<input class="btn btn-default" type="button" onclick="moreFields('readroot', 'writeroot', 'Student')" value="One More Student" />

＆＃13;

＆＃13;

＆＃13;

Answer 1

要直接回答问题，您只需找到合适的<label>并更新innerHTML（见下文）。

但是，您可以使用新的HTML5 template元素实现此处的操作，而无需隐藏<span>元素。此外，您必须记住，当您删除学生时，计数器不会减少，已添加的学生也不会更新。如果您想要这种功能，您可能需要查看Javascript MVVM，例如Angular。

＆＃13;

＆＃13;

var counter = 0;
function moreFields(val1, val2, val3) {
	counter++;
	var newField = document.getElementById(val1).cloneNode(true);
	newField.id = '';
	newField.style.display = 'block';
        // Find the label here and update the innerHTML appropriately
        newField.querySelector(".col-lg-12 label").innerHTML = "Student " + counter;
	var newFields = newField.querySelectorAll('[name], [id], [for]');
		for (var i=0;i<newFields.length;i++) {
			var theNames = newFields[i].name
			if (theNames)
				newFields[i].name = "data[" + val3 + "][" + counter + "][" + theNames + "]";
			var theNames2 = newFields[i].id;
	        if (theNames2)
	            newFields[i].id = theNames2 + counter;
	        var theNames3 = newFields[i].htmlFor;
	        if (theNames3)
	            newFields[i].htmlFor = theNames3 + counter;
		}			
	var insertHere = document.getElementById(val2);
	insertHere.parentNode.insertBefore(newField,insertHere);	
}

＆＃13;

<span id="readroot" style="display: none">
<div class="row">
	<div class="col-lg-3">
		Grade 6
	</div>
	<div class="col-lg-3">
		Male
	</div>
	<div class="col-lg-6">
		<div class="row">
			<div class="col-lg-12">
                <!-- Student number needs to increase when a new form is extended. -->
				<label>Student 1</label> 
			</div>
		</div>
		<div class="row">
			<div class="col-lg-6">
				<label for="display_student_1_grade">Grade</label>
				<div id="display_student_1_grade"></div>
			</div>
			<div class="col-lg-6">
				<label for="display_student_1_gender">Gender</label>
				<div id="display_student_1_gender"></div>
			</div>
		</div>
	</div>	
</div>
<input class="btn btn-default" type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</span>
<span id="writeroot"></span>		
<input class="btn btn-default" type="button" onclick="moreFields('readroot', 'writeroot', 'Student')" value="One More Student" />

＆＃13;

＆＃13;

＆＃13;