Javascript 保留dom元素的旧值

我有以下由django呈现的html。下面是一个例子，说明它是如何实现的

html

和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');


    }

});

$（“#保存短语”）。在（'click'，函数（事件）{
表格=$（“表格#添加短语”）
表单提交（）；
});
$（“.edit phrase”）。在（'click'，函数（事件）{
event.preventDefault（）；
var输入框；
var form=$（this.parent（'form'）；
var p=$（this.sibbines（'p'）；
var输入=“”；
控制台日志（输入）；
如果（$（this）.text（）='Edit'）{
p、 替换为（输入）；
格式。追加（‘删除’）；
格式。附加（“”）；
$（this.text（'Cancel'）；
}否则{
控制台日志（p）；
inputBox=$（this）.sibbines（'input#id_短语'）；
控制台日志（输入框）；
p、 文本（inputBox.val（））；
inputBox.replaceWith（“
“+inputBox.val（）+”）；
$（this）.sides（'input[type=“submit”]'）.remove（）；
$（this.sides（'button'）.remove（）；
$（this.text（'Edit'）；
}
});

它的作用如下：

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

这是它的主要部分。

我编辑了一个适合这个问题的：

编辑

p

时，为将来克隆元素，然后用副本替换元素。通过将

p

的完整克隆存储在其自己的

数据

属性中，它保留自己的历史记录。您可以多次单击“撤消”，因为它将继续从其

数据中弹出自己的历史记录

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

文件：




既然你有一个很好的id，那么哈希表怎么样

var cache = {};

需要缓存时

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

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

如果要存储p的多个版本，请使用哈希表，并将每个元素作为一个实现为堆栈的数组

欢呼声
见我以前的答案：我没有.取消编辑按钮，逻辑是在同一个按钮上实现的，但是谢谢你的回答。我认为把演示和逻辑混合起来是不好的做法（<代码>如果（$（this）.To（））=（=‘编辑’）< /代码>）。文本“编辑”是表示层。使用类名来驱动你的控制器。那么你是建议使用两个单独的按钮？还是仅仅更改现有按钮的类。如果第二个选择正确，我应该使用一个代理？两个选择都可以。想象一下，如果您更改按钮的文本。想象一下，这个可怜的灵魂在未来维护着这个代码。是的，我明白你的意思，我想我会根据你的建议修改我的代码
var cache = {};

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