Multiple identifiers in a single JavaScript click event

Question

In JavaScript, I use the click event to modify chart data. The following is the click event method.

$('#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 minimize these three click events in a single event, which means I want to write a single click event that processes identifiers. something like the code below.

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

I do not know how to do that. The above code is incorrect, it's just a lack of JavaScript knowledge.

Answer 1

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

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

Answer 2

Try the following:

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

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

Use class.

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

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

Answer 5

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

Answer 6

You can give all your elements a class name and use the selector: eq () in jQuery.