Multiple controls with single event using jquery

Question

I am trying to reduce some code here. I will explain how

I have multiple Button controls. I am using the click event for each

$("#B1").click(function() {
                var v1 = "abc";
            });

 $("#B2").click(function() {
                var v1 = "efg";
            });

 $("#B3").click(function() {
                var v1 = "xyz";
            });

I want to remove these 3 clicks event and write a single click event. If the click is from

B1 then v1 should be "abc"; B2 then v1 should be "efg"; B3 then v1 should be "xyz'

How can I write code in the best possible way

Answer 1

Store the values in a "hash", then reference them from the handler by id.

var vals = { "B1": "abc", "B2" : "efg", "B3" : "xyz" };

$('[id^="B"]').click( function() {
     var v1 = vals[this.id];
     ...      
});

Answer 2

If you have a more generic list of names you can use "each" which just loops through you array.

var vals = { "B1": "abc", "B2" : "efg", "B3" : "xyz" };

jQuery.each(vals, function(i, val) {
    $("#" + i).click(function(){
        var v1 = val;
    });
});

As tvanfosson mentioned there are lots of ways to do this. Chances are you may not want to refractor the click events. It's more likely that you need to refractor the code inside of the click event into a more generic function. Make your own function that takes an ID and val and operates on them.

Answer 3

You could also use the data property of the link and then get that in the click event.

$('#B1').data('myKey', 'abc');
$('#B2').data('myKey', 'efg');
$('#B3').data('myKey', 'xyz');
$('.buttons').click(function() {
   var v1 = $(this).data('myKey');
});