表单的逐步撤消历史记录

Question

我正在寻找有关如何为表单实现逐步撤消的帮助/想法。我已经能够达到一个单一的撤消事件，但我不知道如何更进一步。

在我的example 中，用户正在制作一个排序列表。他们选择他们的项目：

<input type="checkbox" id="food1">Bread<br>
<input type="checkbox" id="food2">Milk<br>
<input type="checkbox" id="food3">Juice<br>
<input type="checkbox" id="item1">Paper<br>
<input type="checkbox" id="item2">Pencils<br>
<input type="checkbox" id="item3">Eraser<br>

出现在方框中：
<textarea id="text" rows="10" cols="25"></textarea>

列表是使用以下脚本生成的：

// variable literals
foodtype = {
    food1: "Bread\n",
    food2: "Milk\n",
    food3: "Juice\n"
};

itemtype = {
    item1: "Paper\n",
    item2: "Pencils\n",
    item3: "Eraser\n"
};

// new text
var textbox = $('#text').val();
// old text to revert to
var oldtext = '';

// temporary holder for checkbox id
var choice = null;

// fill textarea with list
function filltext1() {
    if (choice !== null) {
        if (choice.indexOf('food') != -1) {
            textbox += foodtype[choice] + '';
            choice = null;
            $('#text').val(textbox);
        } else if (choice.indexOf('item') != -1) {
            textbox += itemtype[choice] + '';
            choice = null;
            $('#text').val(textbox);
        }
    }
}

// add new selection to list, unless unchecked
$('input:checkbox').change(function () {
    if ($(this).is(':checked')) {
        choice = $(this).attr('id');
        oldtext = textbox;
        filltext1();
    } else {
        $('#text').val(oldtext); // if unchecked, textarea = prior text
        textbox = oldtext; // reset variable to prior text
    }
});

最后一点是我的文本框，如果一个项目未被选中，则后退一步。但是，只有当您取消选中最近的选择时。

一个框的异步取消选中不会删除该项目的条目 - 而只是最后一个选择。

如何将初始选择链接到可以还原的状态？或者换一种说法，有没有办法异步撤销项目进入列表？如果这是可能的，我什至会对顺序撤消感到满意。

感谢您的帮助！

Answer 1

    <form>
    <input type="checkbox" id="food1" Bread="Bread" value="Bread"/>Bread<br />
    <input type="checkbox" id="food2" value="Milk"/>Milk<br />
    <input type="checkbox" id="food3" value="Juice"/>Juice<br />
    <input type="checkbox" id="item1" value="Paper"/>Paper<br />
    <input type="checkbox" id="item2" value="Pencils"/>Pencils<br />
    <input type="checkbox" id="item3" value="Eraser"/>Eraser<br />
    <textarea id="text" rows="10" cols="25"></textarea>
    </form>
    <script>
      var $check=$("input");
      var $text=$('textarea');
      $check.change(function(){
         $text.val($check.map(function(){
           if(this.checked){
           return this.value;
         }}).toArray().join('\n'));
      });
    </script>

您应该为复选框指定值。

http://embed.plnkr.co/f0YlZFGv1kE5lQurPqo5/preview

Answer 2

我只是重建列表。 “撤消”功能在这里不合适，因为用户不一定会按照他检查项目的相同顺序取消选中项目。当我选中 Bread，选中 Milk，然后取消选中 Bread（牛奶意外从列表中删除）时，您当前的示例失败。

// variable literals
var choiceMap = {
    food1: 'Bread',
    food2: 'Milk',
    food3: 'Juice',
    item1: 'Paper',
    item2: 'Pencils',
    item3: 'Eraser'
};

// Container for all the choices currently selected.
var choices = [];

// fill textarea with list
function filltext(choices) {
    var text = choices.join('\n');
    $('#text').val(text);
}

// add new selection to list, unless unchecked
$('input:checkbox').change(function () {
    var
        choiceKey = $(this).attr('id'),
        choice = choiceMap[choiceKey],
        index;
    if ($(this).is(':checked')) {
        choices.push(choice);
    } else {
        // ES5: index = choices.indexOf(choice);
        index = $.inArray(choice, choices);
        choices.splice(index, 1);
    }
    filltext(choices);
});

Fiddle.

或者，您可以在文本框中搜索要删除的项目并将其子串掉。但是，如果用户要编辑框的内容，您将无法找到字符串，或者您可能会找到错误的字符串（例如，如果您有项目“App”和“Apple”，indexOf-ing字符串不起作用，你必须动态构建一个正则表达式）。

Answer 3

在搞砸了一点之后，我采取了另一种方法。我没有尝试撤消，而是删除了每个选中的项目。这允许在列表示例中进行异步删除。

这是更新后的fiddle。

相关代码改动在这里：

else {
        var del = $(this).attr('id'); // set unchecked id
        if (del.indexOf('food') != -1){
            oldtext = textbox.replace(foodtype[del], '');} // delete referenced literal
        else if (del.indexOf('item') != -1){
            oldtext = textbox.replace(itemtype[del], '');} // delete referenced literal            
        textbox = oldtext; // recapture old version
        $('#text').val(oldtext);
    }