Question

出于某种原因，我在我的javascript中有这两个函数，两者似乎都有效。第一个，当用户点击两个div中的一个时，它将显示另一个div，具体取决于点击的。

第二个是用户在第二个div上，然后点击回来。

所有这一切都有效，但当用户返回第一个div时，我点击两个div中的一个，这不会进入第二个div。

它正在关闭两个div。

First Div with two options:

<div class="firstQuestion">
     <div class="male" onclick="secondQuestion(this);"></div>
     <div class="female" onclick="secondQuestion(this);"></div>
</div>

Second div, with back button:

<div class="secondQuestion">
     <form class="formAconselhamento" id="male">
     <input type="button" id="save_value_male" class="back" name="save_value" onclick="comeBack(this); return false;"/>
     <input type="button" id="save_value_male" class="next" name="save_value" />
     </form>
</div>

Javascript functions:

function secondQuestion(divID)
{
    var clicado = $("#"+$(divID).attr('class'));
    $(".firstQuestion").hide();
    $("#"+$(divID).attr('class')).show();
}

function comeBack(divID)
{
    var backButton = $(divID).attr('id');

    if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
    {
        $(".secondQuestion").hide();
        $(".firstQuestion").show();
    }
}

我如何解决我的问题？

Answer 1

在comeBack功能中隐藏<div class="secondQuestion">而不是<form class="formAconselhamento" id="male">

尝试类似：

function comeBack(divID)
{
    var backButton = $(divID).attr('id');

    if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
    {
        $(divID).closest("form").hide();
        $(".firstQuestion").show();
    }
}

Answer 2

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .maincat{background: #eef;}.subcat{background: #abc;}
    </style>
</head>
<body>
<div class="maincat">
    <div class="type" rel='one'>first</div>
    <div class="type" rel='two'>second</div>
    <div class="type" rel='three'>third</div>
</div>
<div class="subcat" style="display: none">
<a href="#" class="back">back</a>
    <div id="one">
        first content
    </div>
    <div id="two">
         second content
    </div>
<div id="three">
         third content
    </div>
</div>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(".type").click(function(){
$(".maincat").hide();
    $("#" + $(this).attr('rel')).show().siblings().hide();
    $('.subcat').show();$('.back').show();
});

$(".back").click(function(){
    $('.subcat').children().hide();$(".maincat").show();
});

</script>
</body>
</html>

Javascript div onclick和后退按钮

2 个答案: