javascript - jQuery/Javascript で ID 値とイベント値をマッピングする

Question

私はjavascript/jQueryが初めてで、IDがアクティブかどうかに基づいてイベントをトリガーする最もスマートな方法を見つけようとしています:

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

ルールが次のようになると、少し難しくなります。

id=1 がアクティブの場合、アラート ("A") をトリガー id=2 がアクティブの場合、アラート ("B") をトリガー id=3 がアクティブの場合、アラート ("C") をトリガー id=4 がアクティブの場合、アラート (" D")

1 を A、2 を B などにマップするには、どの関数を使用できますか?

ありがとう ！

Answer 1

これを試して。

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

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

Answer 2

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

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

もちろん、そのようなIDを持つ要素に関数が存在するかどうかのチェックを追加するなど...

Answer 3

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

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