Javascript div onclick和後退按鈕

由於某種原因，我有這兩個函數在我的JavaScript，並似乎工作。第一個是當用戶點擊兩個div中的一個時，它會顯示另一個div，這取決於點擊的是什麼。Javascript div onclick和後退按鈕

第二個是，當用戶在第二個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(); 
    } 
}

我怎樣才能解決我的問題？

來源

2014-07-14 user3629180

'id's必須是文檔中是唯一的。 – Teemu

而'this'本身就是一個元素，你不需要在這裏使用'#'！ –

@Teemu，但接下來的輸入，沒有任何東西。是因爲這個？ O_O – user3629180

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

來源

2014-07-14 09:08:31 Regent

多數民衆贊成它！非常感謝 – user3629180

@ user3629180不客氣。和Teemu的修改小提琴（也許這將有助於某人）：http://jsfiddle.net/DwV4Y/1/ – Regent

<!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>

來源

2016-11-17 07:47:11 Toki

請解釋你的答案，以便更容易理解它。謝謝 – acostela

單擊選項時顯示適當的內容，通過反向鏈接返回到選項。 – Toki

@acostela我試圖解釋希望我明確。祝你有美好的一天 – Toki

Javascript div onclick和後退按鈕

回答

相關問題