【问题标题】:Undo last executed function with jquery使用 jquery 撤消上次执行的功能
【发布时间】:2012-10-29 15:53:07
【问题描述】:

是否有机会撤消上次调用函数的执行。例如我点击一个

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

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

【问题讨论】:

  • 您的缩小示例中的href 中似乎缺少#

标签: jquery undo


【解决方案1】:

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

【讨论】:

  • 好的,谢谢。老实说,我不知道该怎么做。只是试图在互联网上找到一些东西,但找不到任何相关的东西。你能给我一个提示或一个sn-p吗?
  • 添加了一个 sn-p 作为该想法的示例。
【解决方案2】:

试试这个:

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】:

    使用command pattern,即

    Command 对象对于实现多级撤消很有用 - 如果程序中的所有用户操作都实现为命令对象, 该程序可以保留最近执行的命令的堆栈。 当用户想要撤消命令时,程序只需弹出 最近的命令对象并执行其 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();
    

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

    • 首先

    【讨论】:

    • 非常优雅的解决方案!
    【解决方案4】:
    $('nav a').unbind()
    

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

    - 或 -

    $('nav a').off()
    

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

    【讨论】:

      【解决方案5】:
          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++;
          });
      });
      

      【讨论】:

      • 虽然这段代码 sn-p 可以解决问题,但including an explanation 确实有助于提高帖子的质量。请记住,您是在为将来的读者回答问题,而这些人可能不知道您提出代码建议的原因。
      • 对不起,我只是想给一个简单的答案。我认为关于这个测验有很多解释。
      猜你喜欢
      • 2021-08-05
      • 2016-02-28
      • 1970-01-01
      • 1970-01-01
      • 2023-04-04
      • 1970-01-01
      • 2014-03-18
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多