jQuery html onclick存储锚ID，然后从javascript数组中提取内容

我试图创建一个具有唯一ID的html锚，当用户单击锚时，该ID通过onclick html标记传递给javascript，然后javascript脚本读取ID并在div中显示内容。我们使用jQuery库来实现这一点

到目前为止，我所拥有的：

---

为所有锚定标记指定一个类，并按如下方式访问它：

HTML:

您可以重复使用相同的处理程序，如下所示：

//mapping id to string to display
var data = {
    'MyID1': 'Text 1',
    'MyID2': 'Text 2'
}

//shared click handler
var displayEl = $('.dropdown-menu-content');
function handler() {
    displayEl.html(data[this.id]);
} 

//add click handler to each id
$.each(data, function(k,v) {
    $('#'+k).click(handler);
});

你是说像这样吗？=>

var texts=['Text 1','Text2'];

$('a[id^=MyID]').click(function() {
    $('.dropdown-menu-content').html(texts[$(this).text()-1]);
});

<a id="ID1" class="clickVariables" href="#">ID1</a>
<a id="ID2" class="clickVariables" href="#">ID2</a>

$('.clickVariables').on('click', function(e){
  e.preventDefault();
  $('.dropdown-menu-content').html($(this).attr('id'));
})

//mapping id to string to display
var data = {
    'MyID1': 'Text 1',
    'MyID2': 'Text 2'
}

//shared click handler
var displayEl = $('.dropdown-menu-content');
function handler() {
    displayEl.html(data[this.id]);
} 

//add click handler to each id
$.each(data, function(k,v) {
    $('#'+k).click(handler);
});

var texts=['Text 1','Text2'];

$('a[id^=MyID]').click(function() {
    $('.dropdown-menu-content').html(texts[$(this).text()-1]);
});