如何使用带有 Javascript/typescript/Jquery 的按钮点击功能显示输入字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31385770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display input field using button on-click function with Javascript/typescript/Jquery?
提问by abhilash reddy
I have created a button for adding contact details. When user clicks, few input fields should display to user like first name, last name.
我创建了一个用于添加联系方式的按钮。当用户点击时，应该向用户显示很少的输入字段，如名字、姓氏。
How Can I do this?
我怎样才能做到这一点？
回答by Shrinivas Shukla
Check out this fiddle.
看看这个小提琴。
It uses jQuerywhich makes it much easier.
它使用jQuery这使得它更容易。
Here is the snippet.
这是片段。
$("#button").click(function() {
$("#fn").show();
$("#ln").show();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button" type="button" value="Click">
<br>
<div id="fn" hidden>First Name :
<input type="text" />
</div>
<br>
<div id="ln" hidden>Last Name :
<input type="text" />
</div>回答by Mathi
You might try this..
你可以试试这个..
HTML
HTML
<input id="button" type="button" value="Click"><br>
<div id="div_ctrl" hidden>
<div id="fn">First Name :<input type="text" id="txt1" /></div><br>
<div id="ln">Last Name :<input type="text" id="txt2" /></div>
<input id="button2" type="button" value="Submit" ><br>
</div>
<div id="success" hidden>
<div> Thank You.. Your Information is Saved Successfully! </div>
</div>
jQuery
jQuery
$("#button").click(function() {
$("#div_ctrl").show();
$("#success").hide();
$("#button").hide();
});
$("#button2").click(function() {
$("#success").show();
$("#div_ctrl").hide();
$("#button").hide();
});
回答by Donny
Without any code I can only answer this from my assumptions. I'm assuming your input fields are not hidden, so may want to hide them first. Example style="display:none". Then in your onclick just do the following:
没有任何代码，我只能从我的假设中回答这个问题。我假设您的输入字段没有隐藏，所以可能想先隐藏它们。示例样式=“显示：无”。然后在您的 onclick 中执行以下操作：
$("#buttonid").on("click", function(){
$("#inputid").show();
});
});
Just a quick example.
只是一个简单的例子。
回答by Cristi Marian
First of all you will need to have a template for that:
首先，您需要有一个模板：
var template = '<div><label for="fname">First Name:</label><input type="text" name="fname"><label for="lname">Last Name:</label><input type="text" name="lname">';
After the template is done all you need is to select your container or your last element and simply append the template
模板完成后，您只需要选择容器或最后一个元素，然后简单地附加模板
$('button').click(function(){
// Code for container
$('.container').append(template);
// Code for last pair of elements
$('.lastInputContainer').after(template);
});
回答by michelem
Your question is too broad and you should add your code, but here is something:
你的问题太广泛了，你应该添加你的代码，但这里有一些东西：
HTML:
HTML：
<button class="btn" >Click</button>
<div class="container"></div>
JQUERY:
查询：
$('.btn').click(function () {
$('.container').append('<input name="firstname" placeholder="Firt name"/>');
$('.container').append('<input name="lastname" placeholder="Last name"/>');
});
