上一步，下一步（撤销和恢复）

最新推荐文章于 2025-06-27 19:14:04 发布

weixin_30532759

最新推荐文章于 2025-06-27 19:14:04 发布

阅读量8.5k

点赞数

CC 4.0 BY-SA版权

文章标签： python 开发工具移动开发

原文链接：http://www.cnblogs.com/ywyhero/p/6270248.html

本文介绍了一种实现前端CSS编辑中撤销与重做功能的方法。通过记录每次更改后的状态，可以方便地进行上一步与下一步操作。该方案利用了jQuery库来获取和更新页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var data = {};
data.count = 0;
data.list = [];

function regain () {
function handleSaveCss() {

　　　//获取workspace-body里面的内容
var c = $("#workspace-body").html();

　　　//判断workspace-body里面的内容是否改变
if (!stopsave && c != window.demoHtml) {
stopsave++;
data.list.push(c);
window.demoHtml = c;
saveCss();

stopsave--;
}
}

　 //储存操作时候的状态

function saveCss() {
if (data.list.length > data.count) {
for ( var i = data.count; i < data.list.length; i++){

data.list[i] = null;

}
}
if(data.count < 20) {
data.list[data.count] = window.demoHtml;
data.count++;
} else {
data.list.shift();
data.list[data.count] = window.demoHtml;
data.count++;
}
}
handleSaveCss();
}

//上一步
function prevRemove() {
　　if (data) {
　　　　if (data.count < 2)
　　　　　　return false;
　　　　window.demoHtml = data.list[data.count - 2];
　　　　data.count--;
　　　　$('#workspace-body').html(window.demoHtml);　　
　　　　return true;
　　}
　　return false;
}
//下一步
function nextClone() {
　　if (data) {
　　　　if (data.list[data.count]) {
　　　　　　window.demoHtml = data.list[data.count];
　　　　　　data.count++;
　　　　　　$('#workspace-body').html(window.demoHtml);

　　　　　　return true;
　　　　}
　　}
　　return false;
}
$(".icon-prev").click(function(event) {
　　stopsave++;
　　if (prevRemove()) {
　　　　$(".icon-prev").showLoading();

　　　　//初始化拖拽
　　　　$.dragResizeInitInfo.initContainer();
　　　　$.dragResizeInitInfo.layoutDragInit();
　　　　$.dragResizeInitInfo.componentDragInit();
　　　　$.dragResizeInitInfo.blockDragInit();
　　　　$(".icon-prev").hideLoading();
　　}
　　stopsave--;
});
$(".icon-next").click(function(event) {
　　stopsave++;
　　if (nextClone()) {
　　　　$(".icon-next").showLoading();

　　　　//初始化拖拽
　　　　$.dragResizeInitInfo.initContainer();
　　　　$.dragResizeInitInfo.layoutDragInit();
　　　　$.dragResizeInitInfo.componentDragInit();
　　　　$.dragResizeInitInfo.blockDragInit();
　　　　$(".icon-next").hideLoading();
　　}
　　stopsave--;
});

//在需要设置上一步下一步的地方执行此方法

regain()

转载于:https://www.cnblogs.com/ywyhero/p/6270248.html