Question

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

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

我已经将它用于隐藏当前div但显示所有先前选择的div的位置。它现在在隐藏当前div的地方工作但没有显示任何内容。

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

您可以看到实际网站here，我已经提出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();
}

以下是我在此处审核的一些问题：

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

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

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

我会这样做：

删除display:none类的CSS规则hideFirst（使用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

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

1 个答案: