使用jQuery将标签更改为空文本框

Question

我想通过使用Jquery函数用空的文本框替换Label。 下面是我工作的代码。

<label>Label1</label><br />
<input type="button" value="Edit" id="Edit" />
$( "#Edit" ).click( function() {
    $( "label" ).replaceWith( function() {
        return "<input type=\"text\" value=\"" + $( this ).val("") + "\" />";
    });
});

链接

Answer 1

标签没有与之关联的value属性。 您需要使用.text()而不是.val()来获取文本内容：

$( "#Edit" ).click( function() {
    $( "label" ).replaceWith( function() {
        return "<input type=\"text\" />";
    });
});

工作演示

Answer 2

您可以尝试以下代码：

<label id="labelId">Label1</label><br />
<input type="button" value="Edit" id="Edit" />
<script type="text/javascript">
    $("#Edit").click(function () {
        $("Label#labelId").replaceWith(function () {
            return "<input type='text' value='' />";
        });
    });
</script>

希望这个能对您有所帮助 ：）

Answer 3

与任何值相关的＃1规则。 尝试.val（）.value和.text（）。 然后，如果它们全部失败，则进行更深入的研究。

$( this ).text()

将为您获取当前值。

但我的建议是取消输入并添加：

<label contenteditable="true">Label1</label>

Answer 4

基于此.replaceWith（...）和.prev（...） ，甚至.clone（...）和.replaceAll（...） ，您都可以...

$('#Edit').on('click', function()
{
    // IF YOU WANT TO REPLACE BY THE CURRENT INPUT
    $(this).prev('label').replaceWith(this); // see that I ensure the previous element is a labal
    // ELSE
        // IF YOU WANT KEEP EVENT HANDLERS
        $(this).clone(true).replaceAll($(this).prev('label'));
        // ELSE
        $(this).clone().replaceAll($(this).prev('label'));
        // FI
    // FI
})

Answer 5

return "<input type=\\"text\\" />";

DEMO

只是这样返回，以便输入为空，您还可以添加ID或Class，以便稍后可以在需要时引用输入，如下所示

return "<input type=\\"text\\" class=\\"classname\\"/>";