Jquery 将span标记转换为包含值的文本框

我将对字段进行编辑。当用户单击“编辑”时，我希望将信息转换为文本框，其值为以前的值，但我遇到了问题。以下代码是我尝试过的代码。它提供HTML标记，而不是显示文本框。我怎样才能做到这一点。多谢各位

滑动分页

$（.edit”）。在（'click'，function（）上{
变量名称=$（“#名称”）.text（）；
var city=$（“#city”）.text（）；
var mob=$（“#mob”）.text（）；
var x=“”；
$（“#名称”）.text（x）；
$（“#城市”）。文本（“”）；
$（“#mob”）.text（“”）；
});

HTML 名称：一些名称编辑

当前城市：城市名称

手机号码：手机号码 使用.html（）而不是.text（）

$（.edit”）。在（'click'，function（）上{
变量名称=$（“#名称”）.text（）；
var city=$（“#city”）.text（）；
var mob=$（“#mob”）.text（）；
var x=“”；
$（“#名称”）.html（x）；
$（“#城市”）.html（“”）；
$（“#mob”）.html（“”）；
});

由于希望在特定元素上看到html元素，请使用jquery中的

.html（）

并更改属性、值和id

$(".edit").on('click', function () {
    $(".inf").each(function () {
        $(this).replaceWith(function (i, text) {
            return $("<input>", { // change the type
                type: "text",
                value: text, // getting span text 
                id: this.id // getting span id
            })
        });
    });
});

$（.edit”）。在（'click'，函数（）{
$（“.inf”）。每个函数（）{
$（this）.replaceWith（函数（i，文本）{
返回$（“”，{//更改类型
键入：“文本”，
值：text，//获取范围文本
id:this.id//获取span id
})
});
});
});

尝试以下代码：

HTML:

名称：

当前城市：

移动电话号码：


编辑

JS:

$（.edit”）。在（'click'，function（）上{
变量名称=$（“#名称”）.text（）；
var city=$（“#city”）.text（）；
var mob=$（“#mob”）.text（）；
$（“#名称”）.html（“”）；
$（“#城市”）.html（“”）；
$（“#mob”）.html（“”）；
});

---

这里的live供您参考

为什么您的“HTML”中有php？如果这是JavaScript，则显示呈现的HTML（如浏览器所示）php是不相关的。其中的文本来自数据库，所以我忘了编辑。好的，我正在编辑这个问题。谢谢，非常感谢。如果您输入的值中包含

字符，这可能会中断。@Ja͢ck那么我如何处理这些错误，或者是否有其他方法处理我的逻辑。哦，这是一个愚蠢的错误。我没有照顾好这房子。非常感谢。

 <li class="list-group-item"> <b>Name:</b> <span class="inf" id="name">Some name</span> <span class="label label-info edit">Edit</span> </li>
    <li class="list-group-item"> <b>Current City:</b> <span class="inf" id="city"> City name</span>  </li>
    <li class="list-group-item"> <b>Mobile Number:</b> <span class="inf" id="mob"> mobile number </span> </li>

$(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
    var x = '<input type="text" value="' + name + '">';
    $("#name").html(x);
    $("#city").html("<input type='text' value='" + city + "'>");
    $("#mob").html("<input type='text' value='" + mob + "'>");
});

$(".edit").on('click', function () {
    $(".inf").each(function () {
        $(this).replaceWith(function (i, text) {
            return $("<input>", { // change the type
                type: "text",
                value: text, // getting span text 
                id: this.id // getting span id
            })
        });
    });
});

<li class="list-group-item"> <b>Name:</b> <br/><span class="inf" id="name"><?php echo $uinfo->name; ?></span>  </li>
<li class="list-group-item"> <b>Current City:</b><br/> <span class="inf" id="city"><?php echo $uinfo->current_city; ?></span>  </li>
<li class="list-group-item"> <b>Mobile Number:</b><br/> <span class="inf" id="mob"><?php echo $uinfo->m_number; ?></span> </li><br/>
<span class="label label-info edit">Edit</span>

$(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
   $("#name").html("<input type='text' value='" + name + "'>");
   $("#city").html("<input type='text' value='" + city + "'>");
   $("#mob").html("<input type='text' value='" + mob + "'>");
});