是否有机会撤消最后一个被调用函数的执行。例如,我点击
<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;
});
});
我正在寻找可以撤消上一个函数执行的东西。有什么建议吗?谢谢!!! :)
答案 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)
答案 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++;
});
});