javascript - 将段落属性更改为输入标签

Question

我尝试了以下代码，我试图在单击按钮时通过 jquery 将段落标记更改为输入字段。单击按钮时，我希望我的值保留在文本框中。不幸的是，它不起作用!在这里，我只使用名称字段进行了尝试。请提出任何建议。

代码

<div id="menu2" class="tab-pane fade">
            <h3>Address Book</h3>
            <p>Default delivery address</p>
            <?php
            $em=$_SESSION['login_email'];
            $query = mysqli_query($con,"SELECT * FROM customers where email='$em'" );
            while($row=mysqli_fetch_assoc($query)){
            ?>
            <h5>Name:</h5><p  class="name" id="name"><?= $row['name'] ?></p>
            <h5>Email:</h5><p class="mail"><?= $row['email'] ?></p>
            <h5>Telephone:</h5><p class="tele"><?= $row['phone'] ?></p>
            <h5>Address:</h5><p class="addres"><?= $row['address'] ?></p>
             <h5>City:</h5><p class="city"><?= $row['city'] ?></p>

            <?php
            }
            ?>
            <input type="button" id="update" value="Update Address" >
        </div>

Jquery

 <script src="js/jquery-1.6.2.js"></script>
    <script>
        $(document).ready(function() {
            $('#update').click(function()

            var input = $("<input>", { val: $(this).text(),type: "text" });
            $('#name').replaceWith(input);
            input.select();
        });
        });


    </script>

Answer 1

您的代码有效，但有两个错误。首先，您在 click 处理程序函数定义之后缺少一个 {。其次，#update 点击处理程序中的 this 引用 button 元素，但您正在尝试读取 val() #name 输入的 ，因此您需要更改选择器。考虑到这一点，试试这个:

$('#update').click(function() {
    var $name = $('#name');
    var $input = $("<input>", { 
        val: $name.text(),
        type: "text"
    });
    $name.replaceWith($input);
    $input.select();
});

Working example

当您在循环中定义元素时，我还要注意在页面中使用重复的 id 属性。如果您的查询返回多行，那么文档中将有多个具有相同 id 的元素，这将导致可能的错误，因为 HTML 无效。