按下按钮时如何确定按钮后面当前显示的div

Question

我正在使用Javascript / Jquery按钮切换div在用户窗口中显示。我有我的初始背景div #container，如果用户点击某个位置，则会使用不同的div进行切换。一旦显示新div，后退按钮就会在上切换。如果按下，我希望后退按钮将div切换回初始#container。如果发生这种情况，应该再次将后退按钮的显示切换为关闭。

由于我有后退按钮显示的不同div，我需要确定用户正在查看哪个背景div，以便切换特定div 关闭和#container返回上即可。如果我不切换当前div 关闭，容器将不会再次显示。

这是我的一个实例示例的代码：

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

显然，我不知道用什么代码来确定用户正在查看哪个div。我试过了if(document.getElementById('region1');)但它没有用;我认为不会，但这就是我要如何确定当前div的方向。

任何帮助将不胜感激！

Answer 1

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

Answer 2

如果您正在讨论位于div region1内的DOM中的后退按钮，您可以使用：

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

其中说“如果包含ID区域1的此按钮的父项数不为零”。有关更多信息，请参阅parents。通常，jQuery中的traversing函数对您有所帮助。

Answer 3

这可能是您正在寻找的： http://api.jquery.com/parent-selector/

Answer 4

如果你所做的只是来回切换两个DIV，你甚至不必检查当前显示的是哪个DIV，因为.toggle()功能应该为你做的不在你身边 - 框。

考虑你有两个DIV，确保一个被隐藏，一个被显示，如下所示：

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

现在，当您点击该按钮时，您只需要在这两个按钮上调用.toggle()。

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

您甚至可以只使用一个按钮来完成此操作，只需根据需要切换按钮内的文本。

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

此处的完整代码示例：jsFiddle example