jquery - 使 div 与锚标记平行显示 - onclick

Question

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

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

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

这是用于描述示例的 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

这是小提琴

首先让你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();
});

Answer 2

将您的点击更改为以下内容。

$(document).on('click', '#anchor', function(e){
   $("#myDiv").offset({left:e.pageX,top:e.pageY});
   $("#myDiv").fadeIn();
});

这会将 div 位置更改为鼠标单击。你可以稍微改变一下以获得你想要的结果，但这可能会给你一些想法。

Answer 3

这是演示http://jsfiddle.net/yyene/8bLHF/5/

首先将锚 id 更改为 class。

$(document).on('click', '.anchor', function(){
    var p = $(this).parent('td');
    var position = p.position();
    $("#myDiv").css({
        'left':$('#myTable').width()+10 +'px', 
        'top':position.top+'px'
    });
    $("#myDiv").fadeIn();
});

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