Multiple id's 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].up         


        

Answer 1

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'

Answer 2

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

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

Answer 4

Try this:

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

Answer 5

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

Answer 6

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