0
我无法使用JavaScript和jQuery动态创建多个文本字段。我在下面解释我的代码。无法创建多个文本框使用JavaScript和JQuery的不同ID使用
<div class="col-md-3">
<div class="form-group">
<label for="ques">No of questions</label>
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" type="text">
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label>Questions</label>
<input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();">
<input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
</div>
<div class="text-left" id="intro-add" style="display:none">
<input type="button" name="" class="btn btn-sm btn-info" value="Add">
</div>
</div>
</div>
<div id="container">
<div class="form-group" style="margin-top:5px;display:block" id="introBox0" >
<div>
<input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox0" id="scaleans00" name="labelname" placeholder="Answer" value="">
<input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-">
<div class="text-left" id="intro-add" style="display:block">
<input type="button" name="" class="btn btn-sm btn-info" value="Add" onclick="addMore(0,0)">
</div>
</div>
</div>
<hr>
</div>
这里用户创建多个问题部分和每个问题部分用户使用add按钮来创建多个领域，将删除使用minus按钮。每个问题字段应该唯一的id。假设第一部分有3个输入字段，那么其ids应该是这样的scaleans00,scaleans01,scaleans02...，第二部分应该是scaleans10,scaleans11,scaleans12...等等。我正在解释下面的JavaScript代码。
<script>
function addQuestionField() {
var get = $("#ques").val();
for (var i = 1; i < get; i++) {
$('#container').append('<div class="form-group dyn" style="margin-top:5px;display:block" id="introBox'+i+'"><div><input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox'+i+'" id="scaleans'+i+'0" name="labelname" placeholder="Answer" value=""><input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-"><div class="text-left" id="intro-add" style="display:block"><input type="button" name="" class="btn btn-sm btn-info" value="Add" onclick="addMore('+i+',0)"></div></div></div><hr>');
}
}
function deleteQuestionField() {
var textareas = $('#container .dyn');
if (textareas.length !== 0) {
textareas.last().remove();
$('#ques').val(textareas.length - 1);
}
}
function addMore(parent,child){
var mainDiv='#introBox'+parent;
$(mainDiv).append('<div><input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox'+parent+'" id="scaleans" name="labelname" placeholder="Answer" value="">'+'<input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-"></div>');
repopulate(parent);
}
function repopulate(k){
var mainId='.inptbox'+k;
var j=0;
$(mainId).each(function(i, e) {
if(i==0){
$(this).attr('id', 'scaleans' + i+j);
$(this).next().attr('onClick', function(old, n) {
return 'removeThis(' + i + ','+j+')';
})
$(this).next().attr('id', function(old, n) {
return 'labelminus' + i+j;
});
}else{
$(this).attr('id', 'scaleans' + i+(j+1));
$(this).next().attr('onClick', function(old, n) {
return 'removeThis(' + i + ','+(j+1)+')';
})
$(this).next().attr('id', function(old, n) {
return 'labelminus' + i+(j+1);
});
}
})
}
function removeThis(r,t) {
$("#scaleans" + r+t).remove();
$("#labelminus" + r+t).remove();
repopulate();
}
</script>
在这里，我不能创建按我的要求。 Here is my full code。请帮帮我。
你的问题是你没有得到每个问题的唯一ID是吗？或者还有您的添加和删除字段无法正常工作？ – Logeshwaran
@Logeshwaran：是的，这就对了。 id应该按照我的解释。 – satya
是的，每个部分的第一个字段不应该包含任何'-'按钮。 – satya