CODEWITHSUNDEEP
jqueryfunctionclick
Cecil Theodore
Cecil Theodore

Reputation: 9939

One function with multiple triggers. JQUERY

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;

    }

Upvotes: 1

Views: 518

Answers (2)

RageZ
RageZ

Reputation: 27323

, 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

Upvotes: 4

Alnitak
Alnitak

Reputation: 339955

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.

Upvotes: 4

Related Questions