One function with multiple triggers. JQUERY

Question

I have a function that will run if any one of the multiple items on the page is clicked. The function works, I just want to know is there a better way of listing this using || or something similar.

This is what I have so far:

Init: function () {

        $('#indian-marker a').click(Operations.ShowIndia);
        $('#map-2 a').click(Operations.ShowIndia);
        $('#details-marker a').click(Operations.ShowIndia);

    },

    ShowIndia: function () {

        $('#map').css('background-image', 'url("../img/map-background-india.jpg")');
        $('#map-return').show();
        $('#india-box-link').toggle();
        $('#global-box-link').toggle(); 

        return false;

    }

api.jquery.com/multiple-selector

nnnnnn
– nnnnnn

2011-12-23 10:55:52 +00:00
Commented Dec 23, 2011 at 10:55 — nnnnnn
– nnnnnn, Commented Dec 23, 2011 at 10:55

RageZ · Accepted Answer · 2011-12-23 10:55:24Z

4

, shoud work

Init: function () {

    $('#indian-marker a, #map-2 a, #details-marker a').click(Operations.ShowIndia);


},

ShowIndia: function () {

    $('#map').css('background-image', 'url("../img/map-background-india.jpg")');
    $('#map-return').show();
    $('#india-box-link').toggle();
    $('#global-box-link').toggle(); 

    return false;

}

You can review this examples from the documentation

answered Dec 23, 2011 at 10:55

RageZ

27.3k12 gold badges72 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cecil Theodore Over a year ago

so easy, really thought it would be the double pipes ||, thanks for clearing this up for me!

RageZ Over a year ago

the syntax is the same as CSS, so everything working in CSS should work in jQuery selectors.

Alnitak · Accepted Answer · 2011-12-23 10:53:42Z

4

You can combine the selectors:

$('#indian-marker, #map2, #details-marker').find('a').click(Operations.ShowIndia);

I've moved the a part out of the selector into its own call to avoid it being repeated over and over.

Also, do be careful with that callback. Just because you've referred to it as Operations.ShowIndia doesn't mean that this === Operations when it's actually called. It would be safer to write:

... .click(function() {
    this.ShowIndia();
});

It doesn't matter in this particular function, but if you end up with other functions that rely on this it'll save confusion later.

answered Dec 23, 2011 at 10:53

Alnitak

341k72 gold badges420 silver badges503 bronze badges

1 Comment

David Hellsing Over a year ago

The selector in this answer if more efficient than the accepted answer. It also points out the scoping issue inside the ShowIndia function. +1

Collectives™ on Stack Overflow

One function with multiple triggers. JQUERY

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related