'Multiple IDs in a single JavaScript click event

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.

Solution 1:^[1]

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]
    });
});

Solution 2:^[2]

Try this:

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

Solution 3:^[3]

$('#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]
    });
});

Solution 4:^[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'

Solution 5:^[5]

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

Solution 6:^[6]

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

Solution 7:^[7]

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
});

});});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Alex K
Solution 3
Solution 4	Niall Paterson
Solution 5	Grigur
Solution 6	Dominic Sore
Solution 7	Kundan

'Multiple IDs in a single JavaScript click event

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]