How would you make multiple buttons in html point to the same JS function

Question

I want 'div#Welcome a' and 'div#Familiarize a' to point to this JS code:

    e.preventDefault();
    var itemClicked = $(this);
    var id = itemClicked.attr("id");
    id = id.replace(/\D/g,'');
    slider.goToSlide(id);
    return false;

right now i have this:

$('div#Welcome a').click(function(e){

and this:

$('div#Familiarize a').click(function(e){

for the click to go to the specified code. I was wondering if there was a way that anything that i wanted to be linked with this could could be without having to make a new function every time. Is there an ID for certain tags that i can put on? Thank you in advance.

You can also use comma-separated selectors - $('div#Welcome a, div#Familiarize a').click(function(e){...}); — user1189882
– user1189882, Commented Feb 19, 2016 at 19:50
Or you can add a class to both anchors and bind to that class — Huangism
– Huangism, Commented Feb 19, 2016 at 19:50
FYI, you can eliminate the first 4 lines of code, and just do slider.goToSlide(this.id.replace(/\D/g,'')). The first line isn't needed because return false; handles it. — user1106925
– user1106925, Commented Feb 19, 2016 at 19:55

Rob M. · Accepted Answer · 2016-02-19 19:53:29Z

5

Make your code block into a named function and pass that to your event handlers:

function myEventHandler(e) {
    e.preventDefault();
    var itemClicked = $(this);
    var id = itemClicked.attr("id");
    id = id.replace(/\D/g,'');
    slider.goToSlide(id);
    return false;
}

$('div#Familiarize a').click(myEventHandler);
$('div#Welcome a').click(myEventHandler);

Or as @mark.hch and @Huangism have pointed out, you can also use comma-separated selectors:

$('div#Familiarize a, div#Welcome a').click(myEventHandler);

edited Feb 19, 2016 at 19:53

answered Feb 19, 2016 at 19:49

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

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

8 Comments

Huangism Over a year ago

$('div#Welcome a, div#Familiarize a') save you some characters

Kingrune Over a year ago

Isn't there a way that i can make an if or something to validate certain clicks?

Rob M. Over a year ago

Can you be more specific @Kingrune?

Kingrune Over a year ago

Kind of like what @Barmar is saying where you would add a class to a div except could this be done directly to the a tag? an example being "an a tag is click check to see whether it has _____ class and if it does run the function

Rob M. Over a year ago

You could use if(itemClicked.hasClass('whateverclass')) { // do stuff }

|

Barmar · Accepted Answer · 2016-02-19 19:53:34Z

1

You can use multiple selectors together by separating them with comma.

$('div#Familiarize a, div#Welcome a').click(function(e) {
    e.preventDefault();
    var itemClicked = $(this);
    var id = itemClicked.attr("id");
    id = id.replace(/\D/g,'');
    slider.goToSlide(id);
    return false;
});

Although to simplify things, I suggest giving all the relevant DIVs a common class, and using that in the selector: $('div.tab a').click(...)

answered Feb 19, 2016 at 19:53

Barmar

789k57 gold badges555 silver badges669 bronze badges

Comments

Steve Harris · Accepted Answer · 2016-02-19 20:21:17Z

0

You could also give each div the same class and attach the handler to that.

<div class="thisclass">

$('.thisclass').click(function (e) {

}

answered Feb 19, 2016 at 20:21

Steve Harris

5,1571 gold badge13 silver badges26 bronze badges

Collectives™ on Stack Overflow

How would you make multiple buttons in html point to the same JS function

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related