jquery - 如何将标签转换为文本框？

Question

您好，我想在图像单击事件上将标签字段转换为文本框。 我的 html 文件是

<div>
    <div id="tagCust">Customer Details<img src="images/edit.png" class="alignright"/></div>
</div>

<div id="contactdetail">
    <div id="contactInfo">
        <label for="emailid" class="contactText" data-inline="true">Email Id*</label>
    </div>
         <label for="mobileno" class="contactText" data-inline="true">Mobile No.</br></label>
         <label for="custid" class="contactText" data-inline="true">Customer Id.</label>
</div>

当用户单击编辑图像时，我想将 mobileno 和 emailid 标签转换为文本框。我怎样才能做到这一点？

Answer 1

你不能真正“转换”它，但你可以.replaceWith()标签 html，或 .hide()和.show()它。

例如:

$('.alignright').on('click', function() {
    $('label.contactText').slice(0,2).each(function() {
        $(this).replaceWith( '<input type="text"/>' );
    });
});

.replaceWith还可以寻址节点引用而不是 HTML 字符串。然而，这将以破坏性的方式起作用，并且只有当您不需要再次显示标签时才有意义。否则，创建那些 <input>元素同时创建 <label>节点，只需给它们 CSS 样式 display: none 。单击时，您可以切换这些样式(none 到阻止，反之亦然)或切换类别。