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阻止，反之亦然）或切换类。

Answer 2

我建议使用下面的代码或http://jsfiddle.net/qAZZc/我也不会为了更好地附加输入并隐藏标签而删除标签以获取可访问性。

$("label").each(function(){
        if(($(this).attr("for") == "emailid")||($(this).attr("for") == "mobileno")){
           $(this).after("<input type='text' id='"+ $(this).attr("for") +"'/>");
           $(this).hide();
        }
    });

最好为你的按钮添加一个唯一的id或类，否则.alignright每个地方都会激活你的功能

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

2 个答案: