javascript 单击按钮时显示文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21105375/
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
Show textbox when button is click
提问by rapidoodle
I'm trying to hide and show the password of the user but I'm having a hard time. Here is my markup:
我试图隐藏和显示用户的密码，但我很难。这是我的标记：
<td>Username: <td>
<td><input type="text" class="form-control" value="<?php echo $row['Username'];?>"readonly><td>
<td><input type="button" class="btn btn-primary show" value="Show Password">
<input type="button" class="btn btn-primary hide" value="Hide Password" style="display:none;"><td>
</tr>
<tr class="password" style="display:none;">
<td>Password: <td>
<td><input type="text" class="form-control" value="<?php echo $row['Password']; ?>" readonly><td>
</tr>
And my jQuery
还有我的 jQuery
$(".show").click(function(){
$('.hide').show();
$('.show').hide();});
回答by Cilan
Your HTML is invalid, you need to wrap a tabletag around a trtag or the trand everything in it will return undefinedin Javascript:
您的 HTML 无效，您需要在tr标签或tr周围包裹一个table标签，其中的所有内容都将在 Javascript 中返回undefined：
<table>
<tr>
<td>Username:
<td>
<td>
<input type="text" class="form-control" value="<?php echo $row['Username'];?>" readonly>
<td>
<td>
<input type="button" class="btn btn-primary show" value="Show Password">
<input type="button" class="btn btn-primary hide" value="Hide Password" style="display:none;">
<td>
</tr>
<tr class="password" style="display:none;">
<td>Password:
<td>
<td>
<input type="text" class="form-control" value="<?php echo $row['Password'];?>" readonly>
<td>
</tr>
</table>
and to complete your JQuery, you could use this:
为了完成你的 JQuery，你可以使用这个：
$(".show").click(function () {
$('.hide').show();
$(this).hide();
$('.password').eq(0).show();
});
$('.hide').click(function () {
$('.show').show();
$(this).hide();
$('.password').eq(0).hide();
});
回答by Dipak Ingole
You also can use .toggle()method like
您也可以使用.toggle()方法，如
$(".show").click(function () {
$('.hide').toggle();
$(this).toggle();
$('.password').eq(0).toggle();
});
$('.hide').click(function () {
$('.show').toggle();
$(this).toggle();
$('.password').eq(0).toggle();
});
Working fiddle
工作小提琴
Also do some little changes to HTML as suggested by @Man of Snow..
也按照@Man of Snow 的建议对 HTML 做一些小改动。
回答by Dipak Ingole
You need a [unique] identifier for your password textbox and for your jQuery selector to point to it.
您的密码文本框和 jQuery 选择器需要一个 [唯一] 标识符来指向它。
Example:
例子：
<td><input type="text" class="form-control" id="pwd" value="<?php echo $row['Password']; ?>" readonly><td>
And your jQuery selector should therefore look for am element with id="pwd":
因此，您的 jQuery 选择器应该查找带有以下内容的 am 元素id="pwd"：
$(".show").click(function(){
$('#pwd').show();
});
$(".hide").click(function(){
$('#pwd').hide();
});
