Jquery - 确定点击了哪个链接 [英] Jquery - determining which link was clicked

问题描述

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

I have several similar links that trigger different navigation divs to appear. I am trying to find a way in JQuery to determine which of the links was clicked and then trigger the appropriate open/close functions. The html is:

<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 然后单击另一个时，第一个将关闭.

Currently I use a simple toggle assigned to each pair, but would like to set it up so that when someone opens a hidden div and then clicks another one, the first one will close.

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

Added ... My apologies for not explaining in more details my goals ... The nav menu has three items that need to be changed when a link is clicked. The link itself changes css going from text to an active "tab", the hidden nav toggles between hide & show, an overlay div also toggles between hide & show. When someone clicks the link it should show the overlay & hidden div and change the links css to active. If they click that link again it should toggle back. This part is easy to do. The challenge comes (least for me) is if they have the first hidden open and then click the third link, I want the first hidden to close and its link to change css back to normal and the third hidden to open and its link changed to active, but I want the white to stay open (not toggle on/off creating a flicker). ...

我认为这可能会奏效，可惜没有运气:

I thought this might work, but alas no luck:

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

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

Ultimately the plan is to determine the nav link clicked, then check to see if the background overlay is visible. If not then open the nav links paired hidden div and the overlay. If so, then check to see if hidden div with the same nav_id is open, if so then close everything or if not then close all hidden divs and open the paired hidden div.

推荐答案

我打算在这里尝试一下，并建议不要连续编写围绕标记工作的代码，而是构建标记以使代码正常工作自动.

I'm going to go out on a limb here and suggest that instead of continuously writing code that works around your markup, structure your markup so that your code works automagically.

您应该使用通用类而不是 ID 标记所有导航链接:

You should mark all your nav links with a common class instead of an ID:

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

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

and all your hidden divs in a similar manner:

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

现在您的代码可以很简单:

Now your code can just be something as simple as:

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

    });

});

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

This has the advantage of being able to add more links + navhiddens on your markup without changing a single thing in your code. Additionally, how easy is it to add something like .navhidden { display:none; } in your CSS to hide everything?

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

Instead of changing $('#nav1,#nav2,#nav3') to $('#nav1,#nav2,#nav3,#nav4') and so on and so forth when you add a new link, use the time to get yourself a cup of coffee instead. You can use Javascript / jQuery to determine the ordinal index of an element anyway; there's virtually no need to mark your DOM elements with ordinal sequences like nav1 nav2 nav3 ... navn.

作为旁注，.on 语法是 jQuery 1.7.x.如果您不使用它，请将其更改为 .bind.

As a side note, the .on syntax is jQuery 1.7.x. If you're not using that, change that to .bind.

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

Added in a bit of code to logically toggle the overlay on and off. It's not the most elegant, but you get the gist.

这篇关于Jquery - 确定点击了哪个链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！