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

这是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();
});

Answer 2

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

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

这会将div位置更改为鼠标单击。您可以稍微改变一下以获得您想要的结果，但这可能会让您有所了解。

Answer 3

以下是DEMO http://jsfiddle.net/yeyene/8bLHF/5/

首先将锚点ID更改为类。

$(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(); 
});

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

3 个答案: