Question

<html>
<title>
</title>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
function AddingTextBoxes(){

var NumOfText=$("#NumOfTextBoxes").val();

$('#NewlyCreatedSelectBoxes').empty();

for(i=1; i<=NumOfText; i++){

var ipBoxName="MyInput"+i;

var txtBoxAutoNumbering="<input type='text' name='textbx[]' style='width:50px;'         value="+i+" />&nbsp;&nbsp;&nbsp;";
    $('#NewlyCreatedSelectBoxes').append(txtBoxAutoNumbering);

var txtBox="<input type='text' name='textbx[]'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
    $('#NewlyCreatedSelectBoxes').append(txtBox);

var Select_SelectionOptions="<select id='SelectOption'><option>Text_Box</option>    <option>Text_Area</option><option>Radio_Button</option></select>&nbsp;&nbsp;&nbsp;";
    $('#NewlyCreatedSelectBoxes').append(Select_SelectionOptions);

var Select_For_Multiple_Choices="<button type='button' onclick='ChildTxtBoxes()'         id='ABC'>Click for child selections</button><br><br>";     
    $('#NewlyCreatedSelectBoxes').append(Select_For_Multiple_Choices);

}




return false;

/*for(var i=0; i<NumOfText; i++){
var x=1;
NewlyCreatedSelectBoxes.innerHTML=NewlyCreatedSelectBoxes.innerHTML+"<br>AAA "+x+"<input     type='text' name='mytext'/>";
x++;

}
return false;*/
}

function ChildTxtBoxes(){

var txtBox="<input type='text' name='textbx[]'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
    $('#NewlyCreatedSelectBoxes').append(txtBox);


}


</script>

</head>
<body>
<form >
<div id="PHPForms" >
<!--Designing PHP forms dynamically-->
<label>Form Heading</label><input type="text"/><br><br>
<label>Number of text boxes would needed</label><input id="NumOfTextBoxes" type="text"/>
<button id="A" onclick=" return AddingTextBoxes()">Click</button>
<div id="NewlyCreatedSelectBoxes" name="Texty">



</div>
</div>
</form>
</body>
</html>

在这段代码中，一旦我点击了与“var Select_For_Multiple_Choices”变量相关的按钮，我就会在点击按钮的正下方显示一个文本框。同样，只要按钮是文本框，就应该在该按钮下面显示...在我的代码中虽然它创建了一个文本框，但它显示了所有文本框....我能做到吗？

Answer 1

您可以使用.after（）在找到的元素之后插入。所以像这样：

$(button).after(content);

Answer 2

您可以通过将执行上下文（this）传递给函数ChildTxtBoxes（例如：ChildTxtBoxes(this)）来使代码按预期工作。您必须将您的功能修改为：

function ChildTxtBoxes(button) {
    var txtBox = "<input type='text' name='textbx[]'/>"
    $(button).after(txtBox);
}

注意使用执行上下文（this）来识别单击的按钮，并使用.after()在按钮后面插入文本框，如Vlad建议的那样。

说实话，我并不完全理解关键字this来解释它的工作原理和原因。您可以在JavaScript “this” keyword here

上阅读更多信息

Here is a working demo

在“var Select_For_Multiple_Choices”按钮下创建文本框

2 个答案: