How to determine which div is currently displayed behind a button when button is pressed

I'm using Javascript/Jquery to have a button toggle which div is displayed in the user's window. I have my initial background div #container which gets toggled with a different div if the user clicks on a certain location. A back button is toggled on once the new div is displayed. I want the back button to switch the div back to the initial #container if it is pressed. The back button's display should be toggled off again if this happens.

Since I have different divs that the back button shows up in, I need to determine which background div the user is viewing in orde开发者_如何学Pythonr to toggle that specific div off and the #container back on. The container will not display again if I do not toggle the current div off.

Here's my code for an example of one 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');) but it didn't work; I didn't think it would, but that's the direction I'm going as to how to determine the current div.

Any help would be greatly appreciated!

---

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

---

If you are talking about a back button located in the DOM inside the div region1, you could use:

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

Which says "if the number of parents of this button containing ID region 1 are non-zero". For more information see parents. In general the traversing functions in jQuery will be helpful to you.

---

This might be what you're looking for: http://api.jquery.com/parent-selector/

---

If all you're doing is switching two DIVs back and forth, you don't even have to check which DIV is currently displayed, because the .toggle() function should do that for you out-of-the-box.

Consider you have two DIVs, make sure one is hidden and one is shown, like so:

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

Now, when you click on the button, you just have to call .toggle() on both of them.

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

You can even get by with using only one button to do that, and just switch the text inside the button if you'd like.

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

Full code example here: jsFiddle example