Multiple IDs in a single JavaScript click event

Question

In JavaScript I am using click event to change chart data. Below is a method for click event.

$('#pro1').click(function () {
            chart.series[0].update({
                data: pro1
            });
        });
        $('#pro2').click(function () {
            chart.series[0].update({
                data: pro2
            });
        });
        $('#pro3').click(function () {
            chart.series[0].update({
                data: pro3
            });
        });

I need to minify these three click events in one event, means I want to write one click event which handle the id's. some thing like below code.

$('#pro'+i).click(function () {
chart.series[0].update({
     data: pro+i
});
});

I don't know how to do it exactly. The above code is not correct, it is just my lack of knowledge of JavaScript.

use a class and the magic "this" :)

Gianpaolo Di Nino
– Gianpaolo Di Nino

2013-08-29 10:41:25 +00:00
Commented Aug 29, 2013 at 10:41 — Gianpaolo Di Nino
– Gianpaolo Di Nino, Commented Aug 29, 2013 at 10:41
it would be much easier if pro will be an array

Igor Dymov
– Igor Dymov

2013-08-29 10:42:04 +00:00
Commented Aug 29, 2013 at 10:42 — Igor Dymov
– Igor Dymov, Commented Aug 29, 2013 at 10:42
yep use a class and the "i" woud be $(this).index();

Romaindr
– Romaindr

2013-08-29 10:44:11 +00:00
Commented Aug 29, 2013 at 10:44 — Romaindr
– Romaindr, Commented Aug 29, 2013 at 10:44

Alex K · Accepted Answer · 2013-08-29 10:47:49Z

77

Try this:

var that = this;
$('#pro1,#pro2,#pro3').click(function () {
    chart.series[0].update({
        data: that[$(this).attr('id')];
    });
});

answered Aug 29, 2013 at 10:47

Alex K

7,3679 gold badges44 silver badges65 bronze badges

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

1 Comment

Liam Over a year ago

in 2021, var that = this; should just be replaced with an arrow function

Ram · Accepted Answer · 2013-08-29 10:53:24Z

13

I would suggest creating an object and selecting the elements using classes, id of the clicked element retrieves value of the corresponding property of the helper object:

var pros = {
   pro1: '...',
   pro2: '...'
};

$('.pros').click(function () {
    chart.series[0].update({
        data: pros[this.id]
    });
});

edited Aug 29, 2013 at 10:53

answered Aug 29, 2013 at 10:48

Ram

145k16 gold badges174 silver badges201 bronze badges

2 Comments

Liam Over a year ago

This answer doesn't make sense. .pros is a selector for a class called pros

Ram Over a year ago

@Liam Your comment does not make sense. I had suggested using classes. This is why there is a class selector there.

Tushar Gupta - curioustushar · Accepted Answer · 2013-08-29 10:47:48Z

11

$('#pro1,#pro2,#pro3').click(function () {
    chart.series[0].update({
        data: $(this).attr('id');
    });
});

Updated code

$('#pro1,#pro2,#pro3').click(function () {
    chart.series[0].update({
        data: window[this.id]
    });
});

edited Aug 29, 2013 at 10:47

answered Aug 29, 2013 at 10:42

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

2 Comments

Ram Over a year ago

proN is a variable not a string. If the variables are global window[this.id] will work.

Igor Dymov Over a year ago

do you really think that OP wants to pass string as chart data?

Niall Paterson · Accepted Answer · 2013-08-29 10:42:02Z

4

Use a class.

$('.pro').click(function () {
 chart.series[0].update({
   data: $(this).attr('id');
 });
});

And then on each of the #pro1, #pro2, #pro3 elements add a class of 'pro'

answered Aug 29, 2013 at 10:42

Niall Paterson

3,6103 gold badges32 silver badges39 bronze badges

2 Comments

Glitch Desire Over a year ago

You had data: pro+i without defining vars for pro or i. Downvote removed.

Niall Paterson Over a year ago

Cheers, was a work in progress. Was actually in the middle of it.

Grigur · Accepted Answer · 2013-08-29 10:45:57Z

2

$("*[id^=pro]").click(function () {
    chart.series[0].update({
         data: $(this).attr('id');
    });
});

answered Aug 29, 2013 at 10:45

Grigur

4653 silver badges6 bronze badges

Comments

Dominic Sore · Accepted Answer · 2013-08-29 10:43:37Z

0

You could give all of your elements a class name and use the :eq() selector within jQuery.

answered Aug 29, 2013 at 10:43

Dominic Sore

3952 gold badges4 silver badges16 bronze badges

Comments

Kundan · Accepted Answer · 2020-09-22 05:58:58Z

0

Using each function() you can do it

var i =0;
$("#pro"+i+", #pro"+i+", #pro"+i+"").each(function(){
            $(this).on('click', function(){
chart.series[0].update({
     data: pro+i
});

});});

answered Sep 22, 2020 at 5:58

Kundan

1071 silver badge4 bronze badges

Collectives™ on Stack Overflow

Multiple IDs in a single JavaScript click event

7 Answers 7

1 Comment

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related