我能够创建我想要的输入字段数，但我正在努力正确命名它们并建立索引，因此在提交表单后，我将能够以正确的顺序重新创建/显示结果。
以下是网站http://89.69.172.125/test.php#
的链接使用此代码
，每个冠军输入index-id类似于1,2,3,4等 $('body').on('click', '#addChampion', function() {
$('<p>\
<a href="#" id="remScnt">Remove</a>\
<br>\
<label for="p_scnts">\
<input type="text" id="champion[]" size="20" data-id="'+i+'" list="champions" name="champion[]" placeholder="Enter Champion\'s name" />\
<datalist id="champions"></datalist>\
<a href="#" id="addGeneral">Add General Change</a>\
<a href="#" id="addSpell" data-id="'+i+'"> Add Spell</a>\
<a></a>\
</label>\
</p>').appendTo(scntDiv);
i++;
return false;
});
但是在这个例子中，每个冠军都有类似子类别的法术，我无法正确识别它们
$('body').on('click', '#addSpell',function() {
var championdataid = $('input[id="champion[]"]').attr('data-id');
$(
'<p>\
<select name="change[]" id="change[]" onchange="val(this)">\
<option value="Passive">Passive</option>\
<option value="Q" selected>Q</option>\
<option value="W">W</option>\
<option value="E">E</option>\
<option value="R">R</option>\
</select>\
<label for="var">\
<input type="text" id="championSpell[]" name="championSpell[]" data-id="'+y+'" readOnly="true">\
<br>\
<textarea type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Description" />\
<select>\
<option value="buff">Buff</option>\
<option value="nerf">Nerf</option>\
<option value="new">New</option>\
<option value="change">Change</option>\
<option value="bugfix">Bugfix</option>\
</select>\
</label>\
<a href="#" id="addGeneral">Add Change</a>\
<a href="#" id="remVar">Remove Spell</a>\
</p>').appendTo($(this).next());
y++;
return false;
});
因此，冠军1的ipnput championSpell []数据ID应该是1,2,3,4等，对于champion2应该是1,2,3,4等等。现在你可以为champion1添加3个法术它将是1 ，2,3然后3冠军2将是3,4,5然后2冠军1将是6,7。
以下是没有样式和不相关代码的完整源代码：
<h2>
<a href="#" id="addChampion">Add Another Champion</a>
</h2>
<form name="second_form" id="second_form" action="#" method="POST" style="margin: 0;" >
<div id="p_scents">
<p>
<label for="p_scnts">
<input type="text" id="champion[]" size="20" list="champions" data-id="1" placeholder="Enter Champion's name">
<datalist id="champions"></datalist>
<a href="#" id="addGeneral">Add General Change</a><a></a>
<a href="#" id="addSpell" data-id="1"> Add Spell</a><a></a>
</label>
</p>
</div>
<br/><input type="submit" value="submit">
</form>
<script>
y=0;
function change(x, dblchamp){
if(dblchamp===true){
if(x==="Passive"){x=0;}
if(x==="Q"){x=1;}
if(x==="Q2"){x=2;}
if(x==="W"){x=3;}
if(x==="W2"){x=4;}
if(x==="E"){x=5;}
if(x==="E2"){x=6;}
if(x==="R"){x=7;}
if(x==="R2"){x=8;}
}else if(dblchamp===false){
if(x==="Passive"){x=0;}
if(x==="Q"){x=1;}
if(x==="W"){x=2;}
if(x==="E"){x=3;}
if(x==="R"){x=4;}
}
console.log(x);
return x;
}
function val(elm) {
var championsWithExtraSpells = ["Aatrox", "Elise", "Fizz", "Heimerdinger", "Jayce", "Lee Sin", "Nidalee", "Rek'Sai","Twisted Fate"];
var championName = $(elm).closest("label").find("input").val();
if($.inArray(championName, championsWithExtraSpells)==-1){
var existsInArray = false;}
else{
var existsInArray = true;}
var d = $(elm).val();
var spellname = document.getElementById("championSpell[]");
var z = champions[""+championName+""][change(d, existsInArray)];
test = $(elm).nextAll("input").first().val('test');
console.log(test);
$('input[name="championSpell[]"]').val(champions[""+championName+""][change(d, existsInArray)]);
}
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents label').size() + 1;
var j =0;
$('body').on('click', '#addChampion', function() {
$('<p>\
<a href="#" id="remScnt">Remove</a>\
<br>\
<label for="p_scnts">\
<input type="text" id="champion[]" size="20" data-id="'+i+'" list="champions" name="champion[]" placeholder="Enter Champion\'s name" />\
<datalist id="champions"></datalist>\
<a href="#" id="addGeneral">Add General Change</a>\
<a href="#" id="addSpell" data-id="'+i+'"> Add Spell</a>\
<a></a>\
</label>\
</p>').appendTo(scntDiv);
i++;
return false;
});
$('body').on('click', '#remScnt', function() {
if( i >2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
$('body').on('click', '#addGeneral',function() {
$(
'<p>\
<label for="var">\
<textarea type="text" id="champion[]" size="20" name="GeneralChange[]" value="" placeholder="Enter Description" />\
<select>\
<option value="buff">Buff</option>\
<option value="nerf">Nerf</option>\
<option value="new">New</option>\
<option value="change">Change</option>\
<option value="bugfix">Bugfix</option>\
</select>\
</label>\
<a href="#" id="remVar">Remove Change</a>\
</p>').appendTo($(this).next());
j++;
return false;
});
$('body').on('click', '#remVar',function() {
$(this).parent('p').remove();
return false;
});
$('body').on('click', '#addSpell',function() {
var championdataid = $('input[id="champion[]"]').attr('data-id');
$(
'<p>\
<select name="change[]" id="change[]" onchange="val(this)">\
<option value="Passive">Passive</option>\
<option value="Q" selected>Q</option>\
<option value="W">W</option>\
<option value="E">E</option>\
<option value="R">R</option>\
</select>\
<label for="var">\
<input type="text" id="championSpell[]" name="championSpell[]" data-id="'+y+'" readOnly="true">\
<br>\
<textarea type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Description" />\
<select>\
<option value="buff">Buff</option>\
<option value="nerf">Nerf</option>\
<option value="new">New</option>\
<option value="change">Change</option>\
<option value="bugfix">Bugfix</option>\
</select>\
</label>\
<a href="#" id="addGeneral">Add Change</a>\
<a href="#" id="remVar">Remove Spell</a>\
</p>').appendTo($(this).next());
// $('input[name="championSpell[]"]').attr('data-id', y);
y++;
return false;
});
});
</script>