Jquery - 确定点击了哪个链接

Question

我有几个类似的链接，它们会触发不同的导航 div 出现。我试图在 JQuery 中找到一种方法来确定单击了哪些链接，然后触发适当的打开/关闭函数。 html 是:

<a href="" id="nav1">1</a>
<a href="" id="nav2">2</a>
<a href="" id="nav3">3</a>

<div id="hidden1">nav links 1</div>
<div id="hidden2">nav links 2</div>
<div id="hidden3">nav links 3</div>

目前，我使用分配给每一对的简单切换开关，但希望对其进行设置，以便当有人打开隐藏的 div 然后单击另一个 div 时，第一个将关闭。

已添加... 我很抱歉没有更详细地解释我的目标......导航菜单有三个项目需要在单击链接时更改。链接本身将 css 从文本更改为事件“选项卡”，隐藏导航在隐藏和显示之间切换，覆盖 div 也在隐藏和显示之间切换。当有人点击链接时，它应该显示覆盖层和隐藏的 div 并将链接 css 更改为事件状态。如果他们再次单击该链接，它应该切换回来。这部分很容易做。挑战来了(至少对我来说)是，如果他们打开第一个隐藏，然后单击第三个链接，我希望第一个隐藏关闭，其链接将 css 更改回正常状态，第三个隐藏打开，其链接更改为事件，但我希望白色保持打开状态(不要打开/关闭以产生闪烁)。 ...

我认为这可能有用，但可惜没有运气:

$("#nav1,#nav2,#nav3").click(function(e)
{ 
//determine nav id ...
var nav_id = $(this).attr('id').match(/\d+/);
});

最终计划是确定单击的导航链接，然后检查背景覆盖是否可见。如果没有，则打开配对隐藏 div 和覆盖层的导航链接。如果是这样，则检查具有相同 nav_id 的隐藏 div 是否已打开，如果是，则关闭所有内容，如果不是，则关闭所有隐藏 div 并打开配对的隐藏 div。

Answer 1

我要大胆地建议，不要不断地编写围绕标记工作的代码，而是构建标记以使代码自动工作。

您应该使用公共(public)类而不是 ID 来标记所有导航链接:

<a href="#" class="navlink">Link 1</a>
<a href="#" class="navlink">Link 2</a>
<a href="#" class="navlink">Link 3</a>

以及所有隐藏的 div 以类似的方式:

<div class="navhidden">foo</div>
<div class="navhidden">bar</div>
<div class="navhidden">herp</div>

现在您的代码可以像这样简单:

jQuery(function($) {

    var $navlinks = $('.navlink'),
        $navhiddens = $('.navhidden'),
        $overlay = $('#overlay');

    $navlinks.on('click', function (e) {

        // this is your link
        $link = $(this);

        // get my hidden div + toggle
        $my_navhidden = $navhiddens
            .eq($navlinks.index(this))
            .toggle();

        // hide all the other navhiddens 
        $navhiddens.not($my_navhidden).hide();

        // hide or show the overlay?
        if ($navhiddens.filter(':visible').length > 0) {
            $overlay.show();
        } else {
            $overlay.hide();
        } 

    });

});

这样做的优点是能够在标记上添加更多链接+导航隐藏，而无需更改代码中的任何内容。此外，添加诸如 .navhidden { display:none; 之类的内容是多么容易？ } 在 CSS 中隐藏所有内容？

不要将 $('#nav1,#nav2,#nav3') 更改为 $('#nav1,#nav2,#nav3,#nav4') 等等当您添加新链接时，请利用这段时间给自己喝杯咖啡。无论如何，您可以使用 Javascript/jQuery 来确定元素的序数索引；实际上不需要用像 nav1 nav2 nav3 ... navn 这样的序数序列来标记 DOM 元素。

顺便说明一下，.on 语法是 jQuery 1.7.x。如果您不使用它，请将其更改为 .bind。

编辑

添加了一些代码以逻辑地打开和关闭叠加层。这不是最优雅的，但你明白了要点。