Comment déterminer quelle div est actuellement affichée derrière un bouton lorsque le bouton est enfoncé

Question

J'utilise Javascript/Jquery pour avoir un bouton bascule qui div est affiché dans la fenêtre de l'utilisateur. J'ai mon fond div #container qui est basculé avec un div différent si l'utilisateur clique sur un certain endroit. Un bouton de retour est basculé sur une fois que la nouvelle division est affichée. Je veux que le bouton de retour permute le div au #container initial s'il est pressé. L'affichage du bouton de retour doit être basculé à nouveau si cela se produit.

Depuis que j'ai différentes divs que le bouton de retour apparaît dans, je dois déterminer quel fond div l'utilisateur consulte afin de basculer que div spécifique hors et le #container retour sur. Le conteneur ne s'affichera plus si je ne bascule pas le div actuel sur.

Voici mon code pour un exemple d'une instance:

JS:

$(document).ready(function() 
{ 
    $("#backButton").click(function(e) 
    { 
     if(THE CURRENT DIV IS REGION 1) 
     { 
      $("#container").toggle(); //toggle the container on 
      $("#region1").toggle(); //toggle region 1 off 
      $("#backButton").toggle(); //toggle the back button off 
     } 
    }); 
}); 

Obviously, I do not know what code to use to determine which div the user is looking at. I tried if(document.getElementById('region1');) mais cela n'a pas fonctionné; Je ne pensais pas que ce serait le cas, mais c'est la direction que je vais suivre pour déterminer la division actuelle.

Toute aide serait grandement appréciée!

Answer 1

if($('#region1').is(":visible")){ etc... } 

Answer 2

Si vous parlez d'un bouton de retour situé dans le DOM dans la div region1, vous pouvez utiliser:

if($(this).parents("#region1").length > 0) 

qui dit « si le nombre de parents de ce bouton contenant la région ID 1 sont non zéro". Pour plus d'informations, voir parents. En général, les fonctions traversing de jQuery vous seront utiles.

Answer 3

Cela pourrait être ce que vous cherchez: http://api.jquery.com/parent-selector/

Answer 4

Si tout ce que vous faites est de commutation deux DIVs avant et en arrière, vous ne disposez même pas de vérifier que DIV est affichée , car la fonction .toggle() devrait le faire pour vous dès la sortie de l'emballage.

Considérez vous avez deux DIVs, assurez-vous un est caché et on est montré, comme ceci:

<div id="region1">foo</div> 
<div id="region2" style="display:none;">bar</div> 

Maintenant, lorsque vous cliquez sur le bouton, il vous suffit d'appeler .toggle() sur les deux d'entre eux.

$('#backButton').click(function(){ 
    $('#region1, #region2').toggle(); 
}); 

Vous pouvez même obtenir par l'utilisation un seul bouton pour le faire, et juste passer le texte à l'intérieur du bouton si vous le souhaitez.

// inside the click handler 
$(this).val($(this).val() == 'Next' ? 'Back' : 'Next'); 

exemple de code complet ici: jsFiddle example