1

您好我想在图像点击事件上将标签字段转换为文本框。我的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我怎样才能做到这一点？

4

2 回答 2

4

您不能真正“转换”它，但您可以使用.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阻止，反之亦然）或切换类。

于 2012-07-31T10:11:39.423 回答
0

我会建议下面或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 每个地方都会触发您的功能

于 2012-07-31T10:15:17.313 回答