Mapping id values with event values in jQuery/Javascript

Question

I'm new to javascript/jQuery and I'm trying to find the smartest way to trigger an event based on whether a id is active or not :

<ul class="tabs">
<li id="1" class="active"><a href="#"></a></li>
<li id="2"><a href="#"></a></li>
<li id="3"><a href="#"></a></li>
<li id="4"><a href="#"></a></li>
</ul>

It becomes a bit more difficult as the rule is as follow:

if id=1 is active, trigger alert("A") if id=2 is active trigger alert("B") if id=3 is active trigger alert("C") if id=4 is active trigger alert("D")

What function could I use to map 1 with A, 2 with B etc. ?

Thanks !

Answer 1

var functionsMap = {
    "id1": function() { ... },
    "id2": function() { ... },
    ...
};

$('.tabs li').on('click', function() {
    var id = $(this).attr('id');
    functionsMap[id]();
});

Of course add check if function exists for element with such id, etc...

Answer 2

var call_arr = ['a', 'b', 'c', 'd'];

$('click a random button').click(function(){
    var ind = $('li.active').index();
    alert(call_arr[ind]); 
});

Answer 3

Try this.

var data = ['a', 'b', 'c', 'd'];

$('.tabs li').click(function(){
    alert(data[$(this).index()].toUpperCase()); 
});