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。其次，this点击处理程序中的#update引用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将无效。

将段落属性更改为输入标记

1 个答案: