根据最后一个数组元素显示div内容

时间：2014-12-15 14:52:45

标签： javascript jquery arrays

我有一个页面，页面上有许多隐藏的div。当用户单击特定按钮时，将显示与该按钮关联的页面，并将id添加到数组中。程序的这个方面按照它应该的方式工作，我遇到的问题是，我也希望隐藏前面的div。此外，当用户点击后退按钮时，我希望从数组中删除id（也可以），并且再次隐藏div和前一个显示备份的div。所以基本上，如何隐藏前面的div元素，同时显示下一个div元素（这些元素被添加到数组中），反之亦然？我知道这个问题不是很好，但是我添加了带有评论和截图的代码，以帮助解决问题。

HTML 

<body>
    <div id="main">
        <header>
            <div id="ribbon"></div>
            <hgroup>
                <h3>Gulfstream G-IV</h3>
                <h2>FlightSafety Versatile Tutor</h2>
            </hgroup>
        </header>

        <div id="home_page" class="page">
            <button class="button" id="check_btn">Functional Checks</button>
        </div>

        <div id="check_page">
            <h1>G-IV Functional Checks</h1>
            <div class="half">
                <button class="button" id="integrity_check_btn">Battery Integrity Check</button>
                <button class="button">Pressurization System Check</button>
                <button class="button">Fuel System Check</button>
                <button class="button">Oxygen Crew Mask / Regulator Preflight Test</button>
                <button class="button">Cockpit Voice Recorder(CVR) Test</button>
                <button class="button">Display Controller Test</button>
            </div>
            <div class="half">
                <button class="button">Flight Guide Panel Test</button>
                <button class="button">Auxiliary Hydraulic Pump/ Brake System Check</button>
                <button class="button">Elevator Trim System Check</button>
                <button class="button">Ground Spoiler System Check</button>
                <button class="button">Stall Warning/ Stall Barrier System Check</button>
                <button class="button">APU Overspeed or ASC 465 ECU BIT Test</button>
            </div>
        </div>

        <div id="integrity_check_page">
            <h1>Battery Integrity Check</h1>
            <div class="full">
                <button class="button" id="question">When is the check Conducted?</button>
                <button class="button" id="answer_vid">Video:  Check Conducted at Normal Pace</button>
                <button class="button" id="explain_vid">Video:  Functional Check Explained</button>
            </div>
        </div>

        <div class="return">
            <div id="return_btn"></div>
        </div>
    </div>
</body>

的jQuery 

$(document).ready(function(){
    var id;
    var parent;
    var history = [];

    $(this).find("div").each(function(){
        id = $(this).prop("id");
        if(id == ""){
            *//Removes divs without ids from array*
            history.pop(id);
        }
    })

    history.push("home_page");
    console.log(history);

    $("button").on("click touchstart", function(){
        *//Replaces the button designator and adds the page designator to find the div associated with the button.*
        id = $(this).prop("id").replace("_btn", "_page");
        var h1 = $("#" +id +" h1").text();
        *//Shows the div associated with the clicked button*
        $("#" +id).show();
        *//Shows the back button*
        $(".return").show();
        *//Appends the h1 text to the hgroup*
        $("hgroup").append("<h1>" +h1 +"</h1>");
        *//Adds the div associated with the clicked button to the array*
        history.push(id);
        console.log(history);
    })

    $(".return").on("click touchstart", function(){
        *//If the array has less than two elements, hides the back button*
        if(history.length <= 2){
            $(".return").hide();
        }
        *//Hides the h1 text*
        $("h1").hide();
        *//Hides the div*
        $("#" +id).hide();
        *//Removes the last div from the array*
        history.pop(id);
        console.log(history);
    })
})

启动页面 Splash Page

用户点击功能检查按钮，上一个div＆amp; h1没有隐藏 Functional Checks Button Clicked

用户点击电池完整性检查按钮，结果相同 Battery Integrity Check Button Clicked

用户点击后退按钮，最后一个div被隐藏＆amp;隐藏所有h1元素 Back Button Clicked

再次点击后退按钮，但最后一个div未被隐藏 Back Button Clicked

控制台日志与上面的图像一起 Console

1 个答案:

答案 0 :(得分：0)

我实际上已经开始工作了。但如果有人有更好的方法，请发布作为答案。

<强> HTML 

<body>
    <div id="main">
        <header>
            <div id="ribbon"></div>
            <hgroup>
                <h3>Gulfstream G-IV</h3>
                <h2>FlightSafety Versatile Tutor</h2>
                <h1 id="title"></h1>
            </hgroup>
        </header>

        <div id="home_page" class="page">
            <button class="button" id="check_btn">Functional Checks</button>
        </div>

        <div id="check_page" class="page">
            <h1>G-IV Functional Checks</h1>
            <div class="half">
                <button class="button" id="integrity_check_btn">Battery Integrity Check</button>
                <button class="button">Pressurization System Check</button>
                <button class="button">Fuel System Check</button>
                <button class="button">Oxygen Crew Mask / Regulator Preflight Test</button>
                <button class="button">Cockpit Voice Recorder(CVR) Test</button>
                <button class="button">Display Controller Test</button>
            </div>
            <div class="half">
                <button class="button">Flight Guide Panel Test</button>
                <button class="button">Auxiliary Hydraulic Pump/ Brake System Check</button>
                <button class="button">Elevator Trim System Check</button>
                <button class="button">Ground Spoiler System Check</button>
                <button class="button">Stall Warning/ Stall Barrier System Check</button>
                <button class="button">APU Overspeed or ASC 465 ECU BIT Test</button>
            </div>
        </div>

        <div id="integrity_check_page" class="page">
            <h1>Battery Integrity Check</h1>
            <div class="full">
                <button class="button" id="question">When is the check Conducted?</button>
                <button class="button" id="answer_vid">Video:  Check Conducted at Normal Pace</button>
                <button class="button" id="explain_vid">Video:  Functional Check Explained</button>
            </div>
        </div>

        <div class="return">
            <div id="return_btn"></div>
        </div>
    </div>
    </body>

<强>的jQuery 

$(document).ready(function(){
    var id;
    var parent;
    var history = [];

    $(this).find("div").each(function(){
        id = $(this).prop("id");
        if(id == ""){
            //Removes divs without ids from array
            history.pop(id);
        }
    })

    history.push("home_page");

    $("button").on("click touchstart", function(){
        //Replaces the button designator and adds the page designator to find the div associated with the button.
        id = $(this).prop("id").replace("_btn", "_page");
        var h1 = $("#" +id +" h1").text();
        $(this).parents(".page").hide();
        if($(this).parents(".page").prop("id") !== "check_page"){
            var title = $(this).text();
            $(this).parents(".page").find("h1").html(title);
        }

        //Shows the div associated with the clicked button
        $("#" +id).show();
        //Shows the back button
        $(".return").show();
        //Adds the div associated with the clicked button to the array
        history.push(id);
    })

    $(".return").on("click touchstart", function(){
        var last = history[history.length - 2];
        var current = history[history.length - 1];
        //If the array has less than two elements, hides the back button
        if(history.length <= 2){
            $(".return").hide();
        }
        $("#" +last).show();
        //Hides the div
        $("#" +current).hide();
        //Removes the last div from the array
        history.pop(id);
    })
相关问题
最新问题