Question

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

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

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

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

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

请运行它以便查看其工作原理，只需点击“添加其他”，然后点击“保存”按钮。

Answer 1

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

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

Answer 2

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

＆＃34; li＆＃34;的给定模板略有修改

<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();
});

如果单击“编辑”，则会分割跨区中的文本，并创建每个条目的输入，最后添加一个保存链接。如果链接被klicked，则输入将加入sting并替换spawn中的旧文本。

生成的隐藏和取消隐藏是可选的;）

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

2 个答案: