0

我需要显示一个相对于用户点击链接位置的 div。

用户点击的链接实际上也是动态生成的，看起来像这样。

<td><a href='' onClick="showDiv(14)">Show the div</a></td>

（14 是 DIV 所需的行中记录的 ID）

这是我的 showDiv() 函数

function showDiv(id){

// get the mouse coordinates of the link
var mouseX;
var mouseY;

$(document).mousemove( function(e) {
   mouseX = e.pageX; 
   mouseY = e.pageY;
   $('#myDiv').show().css({'top':mouseY,'left':mouseX});
});  
}

这在执行时显示了我的 DIV，但不是相对的。我觉得我这里有点跑题了，JS不是我的强项。

4

2 回答 2

3

您的代码存在一些问题：

<a href="showDiv(14)">

不要那样做。如果有的话，应该是javascript:showDiv(14)。您应该使用该onclick属性或使用 jQuery 的.click()事件来执行此操作。你也没有结束<a>标签。

<td><a href='' onClick="showDiv(14)">Show the div</td>

应该

<td><a href="#" onClick="showDiv(14)">Show the div</a></td>

另一个问题：$('##myDiv')应该是$('#myDiv').

解决方案：

首先，div 必须绝对定位。

#myDiv {
    position: absolute;
}​

这是您可以为其指定位置的特定 X 和 Y 坐标的唯一方法。

我还将您的链接更改为

<a href='#' class="showTooltip">Show the div</a>

所以我可以简单地使用 jQuery 绑定到showTooltip该类的所有链接的单击事件。

最后是jQuery：

$(".showTooltip").click(function() {
    var left = $(this).position().left;
    var top = $(this).position().top;
    $('#myDiv').css({
        top: top + 5 + "px",
        left: left + 5 + "px"
    }).show();

});

$(this)指的是被点击的元素。我能够得到它的位置，然后myDiv像你一样设置 's 的位置。我还在5px顶部和左侧添加了额外的内容，只是为了向您展示如何抵消它。

演示

于 2012-06-19T23:25:15.130 回答
3

我已经着手制作了一个 jsFiddle来解决您的问题。

关键是将你的函数绑定到点击处理程序：

Javascript

$("selector to your element").click(function(e) {
   mouseX = e.pageX;
   mouseY = e.pageY;

  $("#myDiv").show().css({'top':mouseY,'left':mouseX});
});

同样如小提琴中所述，div 应隐藏display:none;

我继续自己扩展了一点，因为也许您想通过再次单击链接来隐藏 div？你可以在这个fiddle中找到它。

于 2012-06-19T23:44:23.410 回答