Question

我有以下由django呈现的html。这是一个如何

的实例

HTML

<div class="treatment container">

        <div class="row">
            <div class="treatment-phrase col-md-4">
                <form action="" method="post" class="inline">
                    <input type="hidden" name="csrfmiddlewaretoken" value="hbdqhZuNYn83WvZg110TCiENekDqWjUD">
                    <p class="text-info" data-id="2">TR - 35</p>
                    <button class="btn btn-default btn-sm edit-phrase">Edit</button>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="treatment-phrase col-md-4">
                <form action="" method="post" class="inline">
                    <input type="hidden" name="csrfmiddlewaretoken" value="hbdqhZuNYn83WvZg110TCiENekDqWjUD">
                    <p class="text-info" data-id="3">TR - 34</p>
                    <button class="btn btn-default btn-sm edit-phrase">Edit</button>
                </form>
            </div>
        </div>

</div>

css

.panel-body { padding:0px; }
.panel-body table tr td { padding-left: 15px }
.panel-body .table {margin-bottom: 0px; }
.panel-group,
.settings{
    padding-top:2em;

}

.diagnosis-phrase, 
.treatment-phrase,
.category-item{
    padding-bottom: 1em;
    padding-top: 0.5em;
    border: 1px solid black;
    margin-bottom: 0.5em;
}

.diagnosis-phrase input[type="text"],
.treatment-phrase input[type="text"],
.category-item input[type="text"]{
    margin-bottom:0.5em;
}

.category-item p{
    padding-left: 0.5em;
    padding-bottom:0.3em;
    border-radius:0.5em;
    width:50%;
}

和js

$("#save-phrase").on('click', function (event)  {
    form = $("form#add-phrase")
    form.submit();
});

$(".edit-phrase").on('click', function(event){
    event.preventDefault();
    var inputBox;
    var form = $(this).parent('form');
    var p = $(this).siblings('p');
    var input = '<input type="text" data-id="'+p.attr('data-id')+'" class="form-control input-sm col-md-4" id="id_phrase" name="phrase" value="'+p.text()+'">';
    console.log(input);

    if($(this).text() === 'Edit'){            
        p.replaceWith(input);
        form.append('<button name="delete" class="btn btn-default btn-sm">Delete</button>');            
        form.append('<input type="submit" name="submit" class="btn btn-default btn-sm" value="Save">');
        $(this).text('Cancel');

    }else{
        console.log(p);
        inputBox = $(this).siblings('input#id_phrase');
        console.log(inputBox);
        p.text(inputBox.val());
        inputBox.replaceWith('<p class="text-info" data-id="'+inputBox.attr('data-id')+'">'+inputBox.val()+'</p>');
        $(this).siblings('input[type="submit"]').remove();
        $(this).siblings('button').remove();
        $(this).text('Edit');


    }

});

它的作用如下：

它用一个表单的输入元素部分替换一个p dom元素并发布编辑短语或删除它（如果按下删除）除了一件事以外，一切都正常。当用户点击取消时，它将输入框替换为前一个p。但是我编写代码的方式旧p失去了，所以当用户取消替换它的p的值时，它应该是原始值（在编辑之前）键入的最后一个值。如何保存旧值。我无法使用一个全局或两个全局，因为这些短语是动态添加的。请注意，用户可能同时编辑三个短语（但他一次只能保存一个）。如果编辑一次只限于一个短语，你认为这会更好吗？这将解决在编辑之前保存短语的初始值的问题。

以下是bootply。

Answer 1

由于你在那里有一个很好的id，哈希表怎么样

var cache = {};

需要缓存时

cache[inputBox.attr('data-id')] = p.clone();

当你想要检索时，使用id从哈希表中获取旧版本的p。

如果你想存储p的多个版本，那么使用哈希表并让每个元素都是一个实现为堆栈的数组

欢呼声

Answer 2

我已编辑previous answer以符合此问题：

编辑p时，为将来复制元素，然后将该元素替换为稍后的副本。通过将p的完整克隆存储在其自己的data属性中，它会保留自己的历史记录。您可以执行多次“撤消”点击，因为它会继续从其data。

中弹出自己的历史记录

$('.edit-phrase').on('click', function() {
    var p = $(this).siblings('p');
    p.data('my_clone', $(p).clone(true));
    // continue with rest of the logic
});
$('.cancel-edit').on('click', function() {
    var p = $(this).siblings('p');
    p.replaceWith($(p).data('my_clone'));
    // continue with rest of the logic
});

文档：

保留dom元素的旧值

2 个答案: