当单击后退按钮时,是否可以“撤消”由jQuery执行的功能?例如,我要执行的函数名为doS​​omething:

function doSomething(button) {
     ...clicking the button does something...
}

我有一个撤消功能,它可以撤消上述功能undoDoSomething:
function undoDoSomething(button) {
    ....undoes the doSomething function...
}

如何调用按钮的函数,然后在执行函数后立即单击后退按钮,可以调用undoDoSomething函数来撤消该函数?

我知道jQuery历史记录可以返回到保存在历史记录中的上一页,但是如何使用它来调用函数呢?

最佳答案

历史API使此操作变得简单:http://jsfiddle.net/Z9dRY/

的HTML:

<button>Increase</button>click back button to decrease
<span id="counter">0</span>

js:
$("button").click(function(){
    var count = +$("#counter").text() + 1;
    history.pushState({count:count});
    $(counter).text(count);
})
$(window).on("popstate",function(e){
    if (e.originalEvent.state)
        $(counter).text(e.originalEvent.state.count);
})

在每个操作上,添加到历史记录中,然后单击每个后退按钮将撤消每个更改(当然,您必须开发撤消部分。在这种情况下,我只是存储了当时应更改为什么的计数并进行了更改)它。)

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

请注意浏览器的支持,此代码将在所有现代浏览器和IE10 +中使用。 oldIE将需要使用iframe或网址中的哈希值的变通办法。

这是同一示例,其中添加了减少按钮,以表明它并未真正改变任何内容:http://jsfiddle.net/Z9dRY/1/它甚至固有地支持前进按钮(重做)。

更新:修复了丢失的初始状态:http://jsfiddle.net/Z9dRY/2/

关于javascript - JQuery "undo"通过在返回单击时调用另一个函数来执行操作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21054581/

10-12 12:59
查看更多