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

Question

我正在尝试创建一个具有唯一 ID 的 html anchor ，然后当用户单击该 anchor 时，该 ID 通过 onclick html 标记传递给 javascript，然后 javascript 脚本读取该 ID 并将内容显示在一个分区。为此，我们使用 jQuery 库。

我目前拥有的:

<a id="MyID1" onclick="var ClickVariable=this.id;return false">1</a>
<a id="MyID2" onclick="var ClickVariable=this.id;return false">2</a>

<script>
    var ClickVariable; 
    var ContentBox = []; 

                ContentBox[ClickVariable] = "Content for MyID1";

                $(ClickVariable).click(function() {
                $('.dropdown-menu-content').html(ContentBox);
            });   

    </script>

以上方法行不通，但我们有一个可行但效率不高的替代方案。

<a  id="MyID1">1</a>
<a  id="MyID2">2</a>

$('#MyID1').click(function() {
                    $('.dropdown-menu-content').html('Text 1');
                });
$('#MyID2').click(function() {
                    $('.dropdown-menu-content').html('Text 2');
                });

如您所见，上面的方法可以工作，但对于我们的需求来说是非常重复的，因为我们有一个很大的列表要输入。

这是工作中的一个 jsfiddle，它是一项乏味的重复性任务: http://jsfiddle.net/2z7o5hn3/

Answer 1

您可以像这样重用相同的处理程序:

//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);
});

http://jsfiddle.net/2z7o5hn3/2/