jQuery：提交后使动态内容可编辑

Question

我有一个表单，用户可以在其中提交一些值，然后将它们存储在一个以逗号分隔的范围内的列表中，如下所示：

<li>
    <span>
      Harvard,Marketing,2009,2014
    </span>
    <br><a>[Remove]</a>
    <br><a>[Edit]</a>
</li>

//output
Harvard,Marketing,2009,2014
[Remove]
[Edit]

• 单击 [Edit] 时，我想显示表单，用 span 中的值替换列表空间，填充新表单中显示的输入，以便用户可以修改它们并再次保存。我怎样才能做到这一点？

jsFiddle 上的完整代码： http://jsfiddle.net/YueX2/

请运行它以便查看它是如何工作的，只需点击“添加另一个”，然后点击“保存”按钮。

Answer 1

有点乱，但应该让你知道如何做到这一点。

“li”的给定模板略有修改

<li>
    <span>
      Harvard,Marketing,2009,2014
    </span>
    <br><a href="#" class="remove">[Remove]</a>
    <br><a href="#" class="edit">[Edit]</a>
</li>

代码可能是这样的：

$('.edit').click(function(){
    var parent = $(this).parent();
    //get the String from the span element
    var values = $.trim( parent.find('span').text() );
    //and plit them
    values = values.split(',');

    //prepend an container to hold the inputs
    parent.prepend('<div class="editCont"></div>');
    var container = parent.find('.editCont');

    //create inputs for each of the seperated values
    for(var v in values){
        container.append('<input type="text" value="'+values[v]+'" /><br>');
    }
    //create save link and bind click event to it
    container.append('<a href="#" class="editContButton" >save</a><br>');
    parent.find('.editContButton').click(function(){
        //collect all values from the inputs
        var text = [];
        var inputs = container.find('input');
        for(var i = 0; i < inputs.length; i++){
            text.push( $(inputs[i]).val() );
        }
        parent.find('span').show();
        //replace the text in the span element and remove container with inputs again
        parent.find('span').text( text.join(",") );
        container.remove();
    })
    parent.find('span').hide();
});

如果单击编辑，跨度中的文本将被拆分，并为每个条目创建一个输入，最后我添加一个保存链接。 如果链接被点击，输入将加入一个字符串并替换生成中的旧文本。

spawn 的隐藏和取消隐藏是可选的；）

Answer 2

单击编辑时，您可以拆分该跨度的内容，因为它已经用逗号分隔。然后您可以获取新输入并将其应用于保存时的跨度。我编辑了您的编辑功能，并添加了新的保存功能。

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

    //hides edit and remove buttons
    $(".removeParent, .edit").hide();

    //splits span into separate terms
    var terms = $(this).siblings("span").html().split(",");

    //makes new form
    $(this).parents("li").append("<input id='edit1' type='text' value=" + terms[0] + ">" + "<input id='edit2' type='text' value=" + terms[1] + ">" + "<input id='edit3' type='text' value=" + terms[2] + ">" + "<input id='edit4' type='text' value=" + terms[3] + "><input type='button' class='saveEdit' value='Save'>");
});

//additional save method 
$(document).on('click', '.saveEdit', function () {

    //unhides edit and remove buttons
    $(".removeParent, .edit").show();

    //makes the new string for the span
    var newString = $("#edit1").val()+","+$("#edit2").val()+"," +$("#edit3").val()+","+$("#edit4").val();

    //replaces the html of the span with the new string
    $(this).siblings("span").html(newString);

    //hides new form and save button
    $(this).hide(); 
    $("#edit1, #edit2, #edit3, #edit4").hide(); 
});