以<div> <div> 多分支形式隐藏现有并显示上一个

Question

我将首先告诉您，这是我第一个从头开始的Javascript程序。我正在尝试制作一个返回按钮，该按钮将转到表单中以前选择的div（隐藏当前div并显示用户选择的上一个div）。

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

我已经让它工作了，它将隐藏当前div，但显示所有以前选择的div。它现在正在隐藏当前div但不显示任何内容的地方工作。

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

你可以在这里看到实际的网站，我已经安装了一个JSfiddle，但由于某种原因，我无法在那里工作。这是小提琴上的代码：

<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();
}

以下是我在这里回顾的几个问题：

在多步骤表单上保留显示/隐藏div

在同级中隐藏和显示div

如何在angular.js 中显示单击的div的上一个div

如果使用jQuery打开，显示div并隐藏现有div？

显示一个div并隐藏上一个显示的div

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

Answer 1

您可以进行一些自动化操作，而不是分别为每个按钮/选择创建onclick事件。

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

我会这样做的：

• 删除hideFirst类的CSS规则display:none（元素将使用jQuery隐藏）
• 将类添加到按钮/选择/复选框等。。。作为事件的断言者
• 添加data-next属性（用于存储单击/更改时应显示的元素的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