试图用jQuery显示定位的DIV

我需要显示相对于用户点击链接的位置的div。试图用jQuery显示定位的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不是我的力量。

来源

2012-06-19 Jason Wells

我说干就干，一个解决您的问题做出a jsFiddle。

的关键是你的函数绑定到click处理程序：

的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-19 23:44:23 Brenton

谢谢布伦顿，这太好了。 –

嗯，我想我应该在我的例子中更具体一些，但是可显示DIV的可点击链接是通过JSON调用动态生成的。出于某种原因，它不适用于动态链接。我已经证实它在这些之外起作用。 –

AJAX在javascript中绝对是棘手的问题，我将继续并创建一个演示来演示此 – Brenton

与您的代码的几个问题：

<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的位置。我还在顶部添加了5px，剩下的只是为了向您展示如何抵消它。

DEMO

来源

2012-06-19 23:25:15 sachleen

我的错误，我其实并没有从代码中复制和粘贴，并且非常快速地输入它，它在我的代码中是正确的，并且我编辑了帖子:) –

好的，我将编辑我的答案一秒钟内解决您的问题。 – sachleen

感谢您的快速响应sachleen - 我会给你一个去，并标记为您提供演示的答案。再次感谢。 –

试图用jQuery显示定位的DIV

回答

相关问题