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.

Garlicky

use a class and the magic "this" :) – Englebert

it would be much easier if pro will be an array – Soundless

yep use a class and the "i" woud be $(this).index(); – Anecdotage

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

Sombrous

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

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

Answer 2

Try this:

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

Suckling

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

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

Ginzburg

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

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

Answer 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'

Ascent

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

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

Answer 5

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

Distorted

Answer 6

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

Forespeak

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

});});

Interstadial