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("") + "\" />";
    });
});

Link

Answer 1

Label没有与之关联的value属性。您需要使用.text()代替.val()来获取文字内容：

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

<强> Working Demo

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或类，以便稍后在需要时引用输入，如下所示

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

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

5 个答案: