jQuery multiple target IDs for click function

Question

This may be a little redundant but I was wondering if there's a way to improve the code by shortening it to avoid repetition.

$('a[href*="#about"]').click(function()

I want to target #about #products #process #gallery #contact

I want to avoid:

$('a[href*="#about"]', 'a[href*="#process"]', a[href*="#etc"]' ).click(function()

T.J. Crowder · Accepted Answer · 2017-03-30 21:53:34Z

4

Give them all a class and target that:

$(".the-class").click(function() {
    // ...
});

If you can't do that, then what you want to avoid (but done correctly) is what you need to do:

$("[href=#about], [href=#products], [href=#process], [href=#gallery], [href=#contact]").click(function() {
    // ...
});

answered Mar 30, 2017 at 21:53

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

Dotol Over a year ago

Thanks, the thing is that I'm using them as anchors for smooth scrolling, my understanding is that you can't use classes as anchors.

T.J. Crowder Over a year ago

@Dotol: You can add classes to a elements, while leaving their hrefs in place as well, and target the class for your click handler. E.g., <a href="#products" class="smooth">...</a>

000 · Accepted Answer · 2017-03-30 21:59:35Z

1

Alternatively you can set up a single click handler on the page, and delegate based on which element was clicked.

var handledHrefs = ['#about', '#products', '#process', '#gallery', '#contact'];
$('body').on('click', 'a[href^=#]', function (e) {
  if (handledHrefs.includes(e.target.attr('href'))) {
    // ...
  }
});

This actually has a better performance than attaching individual event handlers, surprisingly enough.

answered Mar 30, 2017 at 21:59

000

27.3k10 gold badges74 silver badges103 bronze badges

Collectives™ on Stack Overflow

jQuery multiple target IDs for click function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related