jQuery:在输出中添加数组索引值

Question

我是jQuery新手&JavaScript。

设法使以下代码工作，使其根据no添加新的文本输入字段。由用户从(上一个)下拉选择字段中选择。

<script>
$(function() {
var input = $('<input placeholder="Enter Name or Title..." type="text" required/>');
var newFields = $('');
$('#qty').bind('blur keyup change', function() {
var n = this.value || 0;
if (n + 1) {
if (n > newFields.length) {
addFields(n);
} else {
removeFields(n);
}
}
});
function addFields(n) {
for (i = newFields.length; i < n; i++) {
var newInput = input.clone();
newFields = newFields.add(newInput);
newInput.appendTo('#newFields');
}
}
function removeFields(n) {
var removeField = newFields.slice(n).remove();
newFields = newFields.not(removeField);
}
});
</script>

但是，在<input placeholder="Enter Subject or Title..." type="text" required/>中，我想为每个添加的字段添加两个属性/参数:

1. 首先是name="subject1", name="subject2"&为每个输入字段
等等

与此类似，第一个字段

的输出输入标签应为<input placeholder="Enter Subject or Title..." type="text" name="subject1" required/>

2. 第二个是字段标题("主题1";主题2";,等等)就在<input>标签之前例如，输出输入标签应该是"Subject 1: <input placeholder="Enter Subject or Title..." type="text" name="subject1" required/>";第一个字段

关于如何实现这一目标，请提供任何建议?

Answer 1

这是一个添加主题标题和name属性的方法。

您可以使用i变量来实现字符串连接。

$(function() {
$('#qty').bind('blur keyup change', function() {
var n = this.value || 0;
createFields(n)
});
function createFields(n) {
$("#newFields").empty(); //Empty the list of fields
for (var i = 1; i <= n; i++) {
var fieldWrapper = $('<div class="fieldwrapper"/>'); //Create a wrapper
var name = $("<p>Subject " + i + "</p>"); //Create the subject title
var input = $('<input name="Subject' + i + '" placeholder="Enter Name or Title..." type="text" required />'); //Create the input
fieldWrapper.append(name); //Add the title
fieldWrapper.append(input); //Add the input
$("#newFields").append(fieldWrapper); //Add the group to the list
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="qty" type="number" />
<div id="newFields">
</div>