Question

我正在尝试隐藏并显示用户的密码，但我很难过。这是我的标记：

<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();});

Answer 1

您的HTML无效，您需要在 tr 标记或 tr 周围包含表格标记，其中的所有内容都将返回< Javascript中的strong> 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>

要完成你的JQuery，你可以使用它：

$(".show").click(function () {
    $('.hide').show();
    $(this).hide();
    $('.password').eq(0).show();
});

$('.hide').click(function () {
    $('.show').show();
    $(this).hide();
    $('.password').eq(0).hide();
});

DEMO

Answer 2

您的密码文本框需要[唯一]标识符，并且您的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();
});

Answer 3

您也可以使用

等.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做一些小改动......

单击按钮时显示文本框

3 个答案:

Working fiddle