JavaScript后退按钮显示上一个列表

Question

我想创建一个显示项目列表的 Web 应用程序。假设我显示了一个包含 3 个项目的列表视图（比如 listobject1）。当点击其中任何一个时，我会得到新的列表视图（比如 listobject2），它的值是根据 listobject1。当我再次单击其中一个时，我得到了另一个视图。现在，当我单击后退按钮时，我想返回上一个列表视图，即当我现在在 listobject2 上时，再次按下后退按钮时，我想显示 listobject1。谁能告诉我如何在 JavaScript 中做到这一点？

编辑 我还在研究这些东西，但我还不能解决这个问题。现在为了澄清我的问题，这是我的代码：

$(document).ready(function() {
$("#result").hide();
$("input[name='indexsearch']").live("click", function()  {
    
    $("#result").show();
    $("#result").empty();

    loading_img();
    var $textInput = $("[name='valueLiteral']").val();

    $.getJSON("get_onto", {
        "input" : $textInput
    }, function(json) {
        if(json.length > 0 ) {
            var arrayPredicate = [];
            var arrayObject = [];
            var arraySubject = [];
            $.each(json, function(index, value) {
                arraySubject[index] = value.subject;
                arrayPredicate[index] = value.predicate;
                if(value.objectGeneral != null) {
                    arrayObject[index] = value.objectGeneral;
                } else {
                    arrayObject[index] = value.objectLiteral;
                }
            }

            );
            var stmt = [];
            //concat all related array into string (create triple statement)
            $.each(arrayPredicate, function(k,v){
                stmt[k] = "<span class='subject' id="+arraySubject[k]+">" 
                    + arraySubject[k] + "</span> " + " -> " + v + " : "+ 
                     //change object from text to be button form
                    "<button class = 'searchAgain-button'  name = 'searchMore' \n\
                    value = " + arrayObject[k] + ">" + arrayObject[k] + "</button><br>       <br>";
            });
            stmt = stmt.sort();
            $.each(stmt, function(k,v){
                $("#result").append(v);
            });
        } else {
            var $noresult = "No Result : Please enter a query";
            $("#result").append($noresult);
        }
    });

    
});

$("button").live("click", function() {
    $("#result").show();
    $("#result").empty();

    loading_img();
    var $textInput = $(this).attr("Value");
    //var $textInput = "G53SQM";

    $.getJSON("get_onto", {
        "input" : $textInput
    }, function(json) {
        if(json.length > 0 ) {
            var arrayPredicate = [];
            var arrayObject = [];
            var arraySubject = [];
            $.each(json, function(index, value) {
                arraySubject[index] = value.subject;
                arrayPredicate[index] = value.predicate;
                if(value.objectGeneral != null) {
                    arrayObject[index] = value.objectGeneral;
                } else {
                    arrayObject[index] = value.objectLiteral;
                }
            }

            );
            var stmt = [];
            var searchMore = "searchMore";
            //concat all related array into string (create triple statement)
            $.each(arrayPredicate, function(k,v){
                stmt[k] = "<span class='subject' id="+arraySubject[k]+">" + arraySubject[k] + "</span> " + " -> " + v + " : "+ " <button class = 'searchAgain-button' name = " +searchMore + " value = " + arrayObject[k] + ">" + arrayObject[k] + "</button><br><br>";
        });
            stmt = stmt.sort();
            $.each(stmt, function(k,v){
                $("#result").append(v);
            });
        } else {
            var $noresult = "No Result : Please enter a query";
            $("#result").append($noresult);
        }
    });      
}); 

起初，用户只看到一个按钮名称“valueLiteral”。用户执行第一次搜索后，结果以 JSON 的形式返回并最终放入 stmt[] 显示，在此状态下，第二个按钮被创建为可点击的结果，它将自动获取结果的值并执行第二个搜索用户是否单击第二个按钮。 现在的问题是，如果用户单击该按钮，我想添加第三个 HTML 按钮名称“后退”，以使网络在 stmt[] 中显示先前的结果。

希望这有助于澄清问题，因为我是 JavaScript 的新手，所以我仍在努力解决这些问题。感谢所有帮助。

Answer 1

This 是您想要的，几乎完全符合您的要求。

您必须使用history.pushState 将这些虚假事件推送到历史记录中。

或者，您可以使用location.hash 来存储当前对象，并在每次显示新列表时更新hash。然后onhashchange 找到hash 并显示相应的列表。

Answer 2

见http://jsfiddle.net/cFwME/

var history=[new Array(),new Array()];
history[0].id="#back";
history[1].id="#next";
Array.prototype.last=function(){
    return this[this.length-1];
}
$('#list>li:not(:first)').click(function(){
    if(!history[0].length || history[0].last().html()!=$('#list').html()){
        history[0].push($('#list').clone(true,true));
        $(history[0].id).prop('disabled',false);
        history[1].length=0;
        $(history[1].id).prop('disabled',true);
    }
    $('#list>li:first').html('This is List '+$(this).index());
});
$('#back').click(getHistory(0));
$('#next').click(getHistory(1));

function getHistory(n){
    return function(){
        if(!history[n].length){return false;}
        history[(n+1)%2].push($('#list').replaceWith(history[n].last()));
        history[n].pop();
        $(history[(n+1)%2].id).prop('disabled',false);
        if(!history[n].length){$(history[n].id).prop('disabled',true);}
    }
}

Answer 3

查看 jQuery BBQ - http://benalman.com/projects/jquery-bbq-plugin/