回到我的HTML功能

我在我的HTML中有一些功能。回到我的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，使其工作。

非常感謝提前。

來源

2015-02-10 qqruza

使用標準瀏覽器「返回」功能無法做到這一點。你可以創建一個數組來保持你在這個頁面上的所有動作，並使用它來進入之前的狀態。 – Roman 2015-02-10 21:41:19

我想你誤解了你的函數發生了什麼。你只是更新DOM，而不是操縱瀏覽器歷史。查看文檔：https：//developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history – 2015-02-10 21:41:32

您的代碼正在更改當前頁面上的DOM，而不是更改頁面。 'window.history.back（）;'做到這一點，將你帶回到前一頁。你必須弄清楚如何跟蹤用戶之前點擊的選項，然後用你的代碼把它們帶回到那個選項。 – 2015-02-10 21:41:51

您的「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 
    } 
}

作爲一個側面說明，如果你將要使用的功能來呈現（虛擬）「頁面」你可能想檢查出的骨幹框架。它有一個「路由器」，它允許你將URL（比如'#foo'）綁定到函數中，以便使用JavaScript更好地模擬「頁面」。

如果您使用了骨幹路由器，您實際上可以通過「後退」按鈕返回到上一個（虛擬）頁面。

來源

2015-02-10 21:43:21 machineghost

嗨@machineghost我已經將此代碼添加到我的jsfiddle，但它不能正常工作，請看這裏：http://jsfiddle.net/k4qtypze/1/ – qqruza 2015-02-10 21:48:20

啊，所以它看起來像你實際上需要'secondToLastFunction'也;我會編輯我的答案......雖然正如我在（以前編輯過的）答案中所說的，但您應該真正探索Backbone框架，因爲它具有我認爲您想要內置的所有功能。 – machineghost 2015-02-10 21:50:38

我已添加Backbone js到我的jsfiddle，但後退按鈕仍然沒有把我帶到以前的功能。 http://jsfiddle.net/k4qtypze/4/ 你可以請看看，如果可能的話修改？ – qqruza 2015-02-10 21:56:07

嘗試類似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); 
    }); 
});

來源

2015-02-10 22:18:50 andr

謝謝@andr不斷變化的顏色只是一個例子。它應該是在每個函數下加載的新json內容。但非常感謝您的建議和考慮。 – qqruza 2015-02-10 22:22:44

@qqruza按鈕會改變？我的意思是他們的文字（1，2，3 ...）？如果他們不會，只需用JSON替換顏色數組。 – andr 2015-02-10 22:40:29

回到我的HTML功能

回答

相關問題