Question

<tr>
<td>Name:</td>
<td><span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></td>  
</tr>

我有这个，为了隐藏跨度并让输入显示我需要什么样的JavaScript？这应该通过单击此编辑按钮来完成：

<a href="#" data-original-title="Edit this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-edit"></i></a>

我已经检查了本网站上的其他问题是否有重复，但我尝试了很多，没有人回答我的问题！

Answer 1

<html>
    <head>
        <script>
            function showMe(){
                document.querySelector('#change').style.display = ''; //Show the input
                document.querySelector('#keep').style.display = 'none' //Hide the span
            }
        </script>
    </head>

    <body>
        <tr>
            <td>Name:</td>
            <td>
                <span id = 'keep'>Username</span>
                <input id = 'change' value= 'Name' style= 'display:none;'>
            </td>  
        </tr>
        <a href = '#' data-original-title = 'Edit this user' data-toggle = 'tooltip' type = 'button' class='btn btn-sm btn-warning' onclick = 'showMe()'><i class = 'glyphicon glyphicon-edit'>click me</i></a>
    </body>
</html>

Answer 2

使用此简单代码

首先添加库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

你的HTML代码

<a href="#" data-original-title="Edit this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-edit"></i>edit</a>

<span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></span>

并使用脚本

<script>
$(document).ready(function(){
    $("a").click(function(){
        $(" #change").toggle();
         $("#keep").hide();
    });
});
</script>

在javascript中隐藏/显示元素

2 个答案: