Question

我正在尝试为我的个人资料页面创建一个“内联编辑器”，我正在使用ajax来更新用户信息，但我遇到了一些我似乎无法抗拒的问题。

我想用输入内部相同文本替换一些跨度，以便用户可以直接在个人资料网站上编辑他的信息。

我发现一些可以正常使用的脚本，但只有在需要替换一个范围时才能使用。我需要用输入替换多个跨度。

这是我尝试过的：

HTML：

<span id="name" class="editable">My name</span><br>
<span id="email" class="editable">My email</span>
<span class="edit">Edit</span>

jQuery的：

$(document).on('click', '.edit', function() {

    $(this).text("Change").attr('class', 'change');
    $('span.editable').replaceWith($('<input type=text>').attr({ id: 'name', value: $('span.editable').text() }));

});

$(document).on('click', '.change', function() {

    $(this).text("Edit").attr('class', 'edit');
    // Do Ajax Call

});

它以某种方式工作，但输入中的文本都是相同的，这不是预期的。我需要在每个输入中放置每个跨度的正确文本。

我还需要识别输入，因此新值将使用AJAX调用正确存储，但我不知道如何识别它们。我应该使用ID还是NAME？

我希望你能理解我的问题，并且有人可以/将帮助我解决这个问题。我真的很感激。

感谢Martin

Fiddle Demo

编辑小提琴 - JSFiddle jsfiddle.net

Answer 1

您可以使用接受函数的replaceWith版本：

http://jsfiddle.net/Wb74k/

$('span.editable').replaceWith(function () {
    return $('<input type=text>').attr({
        id: 'name',
        value: $(this).text()
    })
});

Answer 2

替换此行：

$('span.editable').replaceWith($('<input type=text>').attr({ id: 'name', value: $('span.editable').text() }));

使用：

$('span.editable').each(function(index, obj){
    $(obj).replaceWith($('<input type=text>').attr({ id: 'name', value: $(obj).text() }));
})

Answer 3

$(document).on('click', '.edit', function() {

    $(this).text("Change").attr('class', 'change');

    $('span.editable').each( function() {
        $(this).replaceWith($('<input type="text">').attr({ id: $(this).attr("id"), value: $(this).text() }));
    });
});

使用相同文本替换带有输入的跨距

3 个答案:

Fiddle