Jquery - determining which link was clicked

问题

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.

回答1:

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.

回答2:

you can use rel

html:

<a rel="div_id_to_open1" class="expander">Click me</a>
<a rel="div_id_to_open2" class="expander">Click me</a>
<a rel="div_id_to_open3" class="expander">Click me</a>

<div id="div_id_to_open1">Foo</div>
<div id="div_id_to_open2">Foo</div>
<div id="div_id_to_open3">Foo</div>

javascript:

$('.expander').click(function(e) {
   $('#' + $(this).attr('rel')).toggle();
   e.preventDefault();
   return false;
});

You can use .index() if you want to know the relative position of the ancho being clicked, you need to wrap the anchors though:

jsfiddle

回答3:

How about something like this jsFiddle?

When you click a link, the corresponding div is shown while all others are hidden.

$('#hidden1,#hidden2,#hidden3').hide();
$("#nav1,#nav2,#nav3").click(function(e)
{
    e.preventDefault();
    $('#hidden1,#hidden2,#hidden3').hide();
    $('div:eq('+$(this).index()+')').show();
});

回答4:

Andreas' suggestion is sound - the rel attribute is quite useful for this type of thing, and is the right way to go if you have control over the elements.

As for your original method, that ought to work as well (the added regex overhead notwithstanding). Just remember that match will return an array or null. If you forgo the null check, you'd use something like:

var nav_id = $(this).attr('id').match(/\d+/)[0];

One more tip: specifying the element type in your jQuery selector is good practice for speeding up load times. eg: $('a#nav1') vs $('#nav1'), $('a.expander') vs $('.expander')

回答5:

This is my html page (Django template):

<div class="col">
    {% for blog in blogs %}
    <div class="post">
        <h3><a href="{% url 'blog:detail' pk=blog.pk %}">{{ blog.title }}</a></h3>
        <div class="date">
            <p>Created: {{blog.date_created|date:'d M Y'}}</p>
        </div>
        <p>{{ blog.brief|safe }}</p>  

        <ul class="nav justify-content-end">
            <li class="nav-item">
              <a class="nav-link active" href="{% url 'blog:edit' pk=blog.pk %}">Edit</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="publish" href="{{blog.pk}}">Publish</a>
            </li>
            <li class="nav-item">
                <a class="btn btn-danger" id="remove" href="{{blog.pk}}">Remove</a>
            </li>
          </ul>
        <br>
    </div>
    {% endfor %}
</div>

In my javascript file, this is what have and it works.

$(document).ready(function() {

    console.log("document is ready!!!")

    $('#id_bloglist').on("click", 'a#publish,a#remove', function(e) {

    e.preventDefault()

    var pk = $(this).attr("href")

    if ($(this)[0].id == 'remove'){
        console.log("remove link clicked, calling deleteBlog with pk = " + pk)
    }
    else if ($(this)[0].id == 'publish'){
        console.log("publish link clicked, calling publishBlog with pk = " + pk)
    }

    return false;
   });
});

来源：https://stackoverflow.com/questions/8903992/jquery-determining-which-link-was-clicked

标签

jquery

html

attr