jquery - 使 div 看起来与 anchor 标记平行 - onclick

Question

我有一个表，其中有一个操作列，每一行都有 anchor 标记。我想在每次 anchor 点击时填充并显示一个相同的 div。

我能够做到这一点，但我希望该 div 与单击显示的 anchor 标记平行显示。

问题:我已经创建了一切并且它工作正常但我无法定位它。目前它出现在顶部，当我单击页面底部最后一行的 anchor 标记时，div 再次出现在顶部，但我希望它出现在与最底部 anchor 平行的位置。

这是描述示例的 jsFiddle。 http://jsfiddle.net/8bLHF/

<div id="myDiv"><p>Hello</p></div>
<table border="1" cellpadding="10">
 <tr>
   <th>Action</th>
 </tr>
 <tr>
   <td><a id="anchor" href="#">1</a></td>
 </tr>
 <tr>
   <td><a id="anchor" href="#">2</a></td>
 </tr>
 <tr>
   <td><a id="anchor" href="#">3</a></td>
 </tr>
 <tr>
   <td><a id="anchor" href="#">4</a></td>
 </tr>
 <tr>
   <td><a id="anchor" href="#">5</a></td>
 </tr>
</table>

请帮忙

Answer 1

这是 FIDDLE

首先让你的 id="anchor" 成为一个类 class="anchor"。

$(document).on('click', '.anchor', function (e) {
    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
    $('#myDiv')
        .css({
        top: mousey,
        left: mousex
    });
    $("#myDiv").fadeIn();
});

$(document).on('click', '#myDiv', function () {
    $("#myDiv").fadeOut();
});