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

问题描述

我有几个类似的链接触发不同的导航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链接1< / div> 
< div id =hidden2> nav links 2< / div> 
< div id =hidden3> nav链接3< / div> 
  

目前我使用分配给每一对的简单切换，但是想要设置它以便当有人打开隐藏的div，然后点击另一个，第一个会关闭。

新增...
我的道歉没有更详细地解释我的目标......当单击链接时，导航菜单有三个项目需要更改。链接本身改变了从文本到活动标签的css，隐藏的导航在隐藏和放大之间切换。显示，覆盖div也会在hide&显示。当有人点击链接时，它应该显示覆盖图&隐藏div并将链接css改为活动。如果他们再次点击该链接，它应该切换回来。这部分很容易做到。挑战来临（至少对我来说）是，如果他们有第一个隐藏的开放，然后点击第三个链接，我想第一个隐藏关闭，它的链接将css改回正常，第三个隐藏打开，其链接更改为活跃，但我希望白色保持开放（不开启/关闭创建闪烁）。
...

我认为这可能会奏效，但是不幸的是：

  $（＃nav1，＃nav2，＃nav3）。click（function（e）
 {
 //确定nav id .. 。
 var nav_id = $（this）.attr（'id'）。match（/ \ d + /）; 
}）; 
  

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

我打算在这里发表意见，并建议不要不断编写代码来解决标记问题，而是要构建标记以便代码自动运行。

您应该将所有导航链接标记为普通类而不是ID：

 < a href =＃class =navlink>链接1< / a> 
< a href =＃class =navlink>连结2< / a> 
< a href =＃class =navlink>连结3< / a> 
  

以及所有隐藏的div都以类似的方式显示：

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

现在您的代码可以像下面这样简单：

  jQuery（函数（$）{
 
 var $ navlinks = $（'。navlink'），
 $ navhiddens = $（ '.navhidden'），
 $ overlay = $（'＃overlay'）; 
 
 $ navlinks.on（'click'，function（e）{
 
 //这是你的链接
 $ link = $（this）; 
 
 //得到我的隐藏div +切换
 $ my_navhidden = $ navhiddens 
 .eq （$ navlinks.index（this））
 .toggle（）; 
 
 //隐藏所有其他navhiddens 
 $ navhiddens.not（$ my_navhidden）.hide（）; 
 
 //隐藏或显示覆盖图
 if（$ navhiddens.filter（'：visible'）。length> 0）{
 $ overlay.show（）; 
} else {
 $ overlay.hide（）; 
} 
 
}）; 
 
}）; 
  

这样做的好处是能够在您的标记中添加更多链接+ navhiddens而不会改变一件事在你的代码中。此外，添加诸如 .navhidden {display：none; } 在你的CSS中隐藏所有内容？

而不是改变 $（'＃nav1，＃nav2，＃nav3 '）到 $（'＃nav1，＃nav2，＃nav3，＃nav4'） 等等等等 nav1 nav2 nav3 ... navn 。





请注意， .on 语法是 jQuery 1.7.x 。如果你不使用它，把它改为 .bind 。

编辑

在一些代码中添加了逻辑切换叠加层的开关。这不是最优雅的，但你得到的主旨。

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>

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.

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

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.

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>

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

    });

});

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?

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.

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

EDIT

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屋！