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按钮名称“back”，以使web在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/

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

3 个答案: