隐藏现有 <div> 并以多分支形式显示以前的 <div>

Question

首先我要告诉你，这是我从零开始的第一个 Javascript 程序。我正在尝试制作一个后退按钮，它将以一种形式转到先前选择的 div（隐藏当前 div 并显示用户选择的前一个）。

表单有多个路径可以遵循，路径中的路径并且并非所有选择器都是按钮。可能有一个 onchange 事件或一个单选按钮，甚至是文本输入（文本输入有一个可以单击的下一步按钮）。

我已经让它工作，它会隐藏当前的 div 但显示所有以前选择的 div。它现在可以隐藏当前 div 但什么都不显示。

我在这里和其他论坛上阅读了很多帖子，但还没有找到我需要的东西。任何帮助将不胜感激。

您可以看到实际的站点 here and I have put up a JSfiddle 但由于某些原因我无法在该站点上运行。这是来自 fiddle:

的代码

<div>
    <form>
        <div id="uno" class="showFirst">
            <button onclick="hideUno()">First Button</button>
        </div>
        <div id="dos" class="hideFirst">
            <button onclick="hideDos()">Second Button</button>
        </div>
        <div id="tres" class="hideFirst">
            <button onclick="hidetres()">Third Button</button>
        </div>
        <div id="quattro" class="hideFirst">
            <button onclick="hideQuattroUno()">Fourth Button</button>
            <button onclick="hideQuattroDos()">Fifth Button</button>
        </div>
        <div id="branchUno" class="hideFirst">
            <p>First Branch</p>
        </div>
        <div id="branchDos" class="hideFirst">
            <p>Second Branch</p>
        </div>
    </form>
    <button id="backButton" onclick="goToPrevious" class="hideFirst">Back</button>
</div>

.hideFirst {
    display: none;
}
function goToPrevious() {
    var current = $(".chosen").find(":visible");
    $(current).hide();
    $(current).prev(".chosen").show();
}

function hideUno() {
    $("#backButton").toggle();
    $("#uno").toggle();
    $("#uno").addClass("chosen");
    $("#dos").toggle();
}

function hideDos() {
    $("#dos").toggle();
    $("#dos").addClass("chosen");
    $("#tres").toggle();
}

function hideTres() {
    $("#tres").toggle();
    $("#tres").addClass("chosen");
    $("#quattro").toggle();
}

function hideQuattroUno() {
    $("#quattro").toggle();
    $("#quattro").addClass("chosen");
    $("#branchUno").toggle();
}

function hideQuattroDos() {
    $("#quattro").toggle();
    $("#quattro").addClass("chosen");
    $("#branchDos").toggle();
}

以下是我在此处查看的一些问题：

retain show / hide div on multistep form

Hide and Show div in same level

how to show previous div of clicked div in angular.js

show div and hide existing div if open with jQuery?

Show one div and hide the previous showing div

我意识到这不是最干净的代码，但正如我所说，这是我的第一个代码，我正在努力清理并学习新事物。

Answer 1

您可以进行一些自动化，而不是为每个 button/select 单独创建 onclick 个事件。

对于 "Back" 功能，我会在每个步骤使用数组存储元素 "on the fly"，而不是稍后检查可见性。

我会这样做：

删除 CSS 规则 display:none 用于 hideFirst class（将使用 jQuery 隐藏元素）。
将 class 添加到 buttons/selects/check-boxes/etc... 作为事件指示器。
添加 data-next 属性（用于存储应在 click/change 上显示的元素的 id）

HTML:

<div id="firstDiv" class="hideFirst">
    <button class="my-btn" data-next="#secondDiv" type="button">Show next<button>
</div>

<div id="secondDiv" class="hideFirst">
    <select class="my-select" data-next="#thirdDiv">
        <option>Helo World</option>
        ...
    </select>
</div>
...

脚本：

$(document).ready(function(){

    // hide all 'hideFirst' elements, except the first one:
    $('.hideFirst:not(:first)').hide();
    // declare 'history' variable as an empty array (it will be used to store 'hideFirst' elements for 'Back' functionality):
    var history = [];

    // click event for the buttons :
    $('.my-btn').click(function(e){
        // as the button will submit the form if you're not using type="button" attribute, use this:
        e.preventDefault();
        showNext($(this));
    });

    // change event for selects :
    $('.my-select').change(function(){
        showNext($(this));
    });

    // Method used to show/hide elements :
    function showNext(el){
        // check if element has a 'data-next' attribute:
        if(el.data('next')){
            // hide all elements with 'hideFirst' class:
            $('.hideFirst').hide();
            // show 'Back' button:
            $('#backButton').show();
            // show the element which id has been stored in 'data-next' attribute:
            $(el.data('next')).show();
            // Push the parent element ('.hideFirst') into history array:
            history.push(el.closest('.hideFirst'));
        }
    }

    // click event for 'back' button:
    $('#backButton').click(function(){
        // hide all elements with 'hideFirst' class:
        $('.hideFirst').hide();
        // remove the last '.hideFirst' element from 'history' array and show() it:
        history.pop().show();
        // hide 'back' button if history array is empty:
        history.length || $(this).hide();
    }).hide(); // hide 'back' button on init

});

DEMO

隐藏现有 <div> 并以多分支形式显示以前的 <div>

Hide existing <div> and show previous <div> in multi-branch form

javascript

jquery

event-handling

show-hide