单击按钮时显示文本框
单击按钮时显示文本框
提问于 2014-01-14 11:05:46
我试图隐藏和显示用户的密码，但我遇到了困难。这是我的标记：
<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>还有我的jQuery
$(".show").click(function(){
$('.hide').show();
$('.show').hide();});回答 3
Stack Overflow用户
回答已采纳
发布于 2014-01-14 11:22:53
您的HTML无效，您需要将表标记括在tr标记或tr中，其中的所有内容都将在Javascript中返回未定义的：
<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>要完成您的JQuery，您可以使用以下命令：
$(".show").click(function () {
$('.hide').show();
$(this).hide();
$('.password').eq(0).show();
});
$('.hide').click(function () {
$('.show').show();
$(this).hide();
$('.password').eq(0).hide();
});DEMO
Stack Overflow用户
发布于 2014-01-14 11:14:09
您需要密码文本框的唯一标识符，并使jQuery选择器指向它。
示例：
<td><input type="text" class="form-control" id="pwd" value="<?php echo $row['Password']; ?>" readonly><td>因此，您的jQuery选择器应该查找带有id="pwd"的am元素
$(".show").click(function(){
$('#pwd').show();
});
$(".hide").click(function(){
$('#pwd').hide();
});Stack Overflow用户
发布于 2014-01-14 11:27:59
您还可以使用.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
我还按照@Man of Snow的建议对HTML做了一些小改动。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21105375
复制相关文章
相似问题
腾讯云开发者
