使用jquery撤消上次执行的函数

时间:2012-11-09 10:21:49

标签: jquery undo

是否有机会撤消最后一个被调用函数的执行。例如,我点击

<nav><a href="foo">...</a></nav>

它有一个onclick-listener,就像那样:

$(function() {
    $('nav a').on('click', function() {
        $('nav a').removeClass('active');
        $(this).addClass('active');
        $($(this).attr('href')).addClass('active');
        return false;
    });
});

我正在寻找可以撤消上一个函数执行的东西。有什么建议吗?谢谢!!! :)

5 个答案:

答案 0 :(得分:11)

使用command pattern,即

  

命令对象对于实现多级撤消非常有用 -   如果程序中的所有用户操作都实现为命令对象,   程序可以保留一堆最近执行的命令。   当用户想要撤消命令时,程序只会弹出   最近的命令对象并执行其undo()方法。

基本的JavaScript实现可能如下所示:

function command(instance) {    
  this.command = instance;
  this.done = [];

  this.execute = function execute() {
    this.command.execute();
    this.done.push(this.command);
  };      
  this.undo = function undo() {
    var command = this.done.pop();
    command.undo();    
  };  
}

要测试这个,请构建简单的DOM:

<ul>
    <li>first</li>
</ul>

并定义一个您想要使用的命令对象。这样的对象应该包含其执行逻辑以及用于重构DOM的先前状态的其他行为(至少在我们的示例中):

var appendcommand = new command({
  execute: function(){
    $('ul').append('<li>new</li>');
  },
  undo: function(){
      $('ul li:last').remove();
  }
});

执行后:

appendcommand.execute();

您的信息页将从

更改
  • 第一

  • 首先

执行时:

appendcommand.undo();

会将此页面转换为原始状态:

  • 第一

答案 1 :(得分:0)

JavaScript引擎不会为您保存任何以前的状态,您必须自己动手。这意味着您必须跟踪要操作的对象的先前和当前状态。

在您的情况下,您可以拥有一个“以前处于活动状态”的对象列表,然后您的“撤消”将根据该列表激活前一个元素。

我没有尝试过代码,但你应该从中得到这个想法。另外,如果您遇到阵列问题,请查看http://www.w3schools.com/jsref/jsref_obj_array.asp

var undoList = new Array();

function manipulate(elem) {
    $('nav a').removeClass('active');
    $(elem).addClass('active');
    //...
}

function undo() {
    if(undoList.length > 0) {
        var elemToManipulate = undoList.pop();
        manipulate(elemToManipulate);
    }        
}

function manipulateWithUndo(elem) {
    undoList.push(elem);
    manipulate(elem);
}

答案 2 :(得分:0)

试试这个:

var active=0;

    if(active==0)
    {
    //write here your code
    active=1;
    }else
    {
    //write here your "undo" code
    //example: Write your code but in reverse order: addclass().removeclass().removeclass()
    active=0;
    }

答案 3 :(得分:0)

$('nav a').unbind()

http://api.jquery.com/unbind/

- 或 -

$('nav a').off()

http://api.jquery.com/off/

答案 4 :(得分:0)

    var clk=1; 
$(document).ready(function(){
    $("button").on('click',function(){
        if(clk%2==1){
           $('#sidebar').addClass('active');
             $(".main").css("display", "flex");
         }else{

             $('#sidebar').removeClass('active');
             $(".main").css("display", "");
        }

        clk++;
    });
});