Question

我的HTML中有一些函数。

window.option1 = function () {
    $('div').empty().css('background-color','#1fc868').append('1');
}

window.option2 = function () {
    $('div').empty().css('background-color','#f8de41').append('2');
}

window.option3 = function () {
    $('div').empty().css('background-color','#f42731').append('3');
}

还有一个返回上一个功能的按钮

function goBack() { window.history.back(); }

但是它让我回到了上一页，而不是我之前点击的功能。

请在此处查看实时示例：http://jsfiddle.net/ay0zrhn6/

我是一个绝对的初学者，如果你能修改上面的 jsfiddle 以使其正常工作，我将非常感激。

非常感谢提前。

Answer 1

您的“goBack”功能不会“返回上一个功能”;正如您所知，它会回到之前的HTML页面。

如果你想让你的“goBack”函数调用以前调用过的函数，你需要跟踪你自己的最后一个函数，以便你的“goBack”函数可以使用它。例如：

window.option1 = function () {
    $('div').empty().css('background-color','#1fc868').append('1');
    window.secondToLastFunction = window.lastFunction;
    window.lastFunction = 'option1';
}

window.option2 = function () {
    $('div').empty().css('background-color','#f8de41').append('2');
    window.secondToLastFunction = window.lastFunction;
    window.lastFunction = 'option2';
}

window.option3 = function () {
    $('div').empty().css('background-color','#f42731').append('3');
    window.secondToLastFunction = window.lastFunction;
    window.lastFunction = 'option3';
}

window.goBack = function() {
    var secondToLastFunction = window[window.secondToLastFunction];
    if (secondToLastFunction) {
        secondToLastFunction();
    } else {
        // do whatever you want to have happen when there is no
        // previous function to run
    }
}

作为旁注，如果您要使用函数来呈现（虚拟）“页面”，您可能需要查看Backbone框架。它有一个“路由器”，允许您将URL（如'#foo'）绑定到函数，以便您可以使用JavaScript更好地模拟“页面”。

如果您使用了Backbone路由器，您实际上可以使用“后退”按钮将您带回到上一个（虚拟）页面。

Answer 2

尝试this之类的内容。使用jQuery简单易用。

$(function() {
  var colors  = ['#1fc868', '#f8de41', '#f42731', '#f452af', '#8d44b6'],
      counter = 0;

  $('button:not(:first-child)').click(function() {
    changeText($(this).text());
  });

  var changeText = function(text) {
    counter = parseInt(text);
    $('div').css('background-color', colors[counter - 1]).text(text);
  };

  $('button:first-child').click(function() {
    if (counter < 2) {
      return;
    }

    changeText(counter - 1);
  });
});

返回我的HTML中的函数

2 个答案: