Jquery - determining which link was clicked

Question

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 trig

Answer 1

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

Answer 2

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

Answer 3

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

Answer 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')

Answer 5

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.