JQuery的：显示在鼠标位置一个隐藏的div时，点击一个链接

假设我有我的第2页的链接，我想一个隐藏的div出现在页面上的鼠标所在的位置（鼠标X，Y）当任一链接被点击时。另外，我想传入一个值来设置div的标题（请参阅divTitle id）。JQuery的：显示在鼠标位置一个隐藏的div时，点击一个链接

我该如何使用jQuery来完成这项工作？

隐藏事业部：

<div class="boxFAQ" id="questionMarkId"> 
    <span id="divTitle"></span> 
    SHOW ME! 
</div>

来源

2013-02-12 E Paiz

还有，你试过吗？ – hjpotter92 2013-02-12 05:19:38

你有什么麻烦？ – gilly3 2013-02-12 05:21:11

你有什么问题可以告诉刚刚 – 2013-02-12 05:22:12

下面的代码会给你的想法有关显示div。您的需求出发，然后把它隐藏或相应的显示信息，因为你需要

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 

jQuery(document).ready(function(){ 
    $('.alink').click(function(e){ 
    $('#questionMarkId').hide(); 
    $('#questionMarkId').css({'top':e.pageY-50,'left':e.pageX, 'position':'absolute', 'border':'1px solid black', 'padding':'5px'}); 
    $('#questionMarkId').show(); 
    }); 
}); 



</script> 
</head> 

<body> 

<div class="boxFAQ" id="questionMarkId" style="display: none;"> 
    <span id="divTitle"></span> 
    SHOW ME! 
</div> 


<br /><br /><br /><br /> 
<a href="#" class="alink">Link 1</a> 
<a href="#" class="alink">Link 2</a> 


</body> 
</html>

修订
创建将链接点击的可调用的函数。这个函数传递你的信息（任意数量的参数）
所以你的链接看起来就像这样

<a href="#" class="alink" onclick="showTitle('This is the title')">Link 1</a> 
<a href="#" class="alink" onclick="showTitle('This is another title')">Link 2</a>

功能看起来像这样

function showTitle(message) 
{ 
    $('#questionMarkId').hide(); 
    $('#questionMarkId').css({'top':e.pageY-50,'left':e.pageX, 'position':'absolute', 'border':'1px solid black', 'padding':'5px'}); 
    $('#questionMarkId').show(); 
    $('#divTitle').html(message); 
}

修订
功能与event参数

function showTitle(message, evt) 
{ 
    var e = e || evt || window.event; 
    // ... rest of the code 
}

来源

2013-02-12 05:29:52 asifsid88

asifisid88，谢谢！这是一个很好的例子。我的下一个问题是，当有人点击一个链接类别的链接时，这将工作。我怎样才能改变这一点，所以我可以通过参数传递onclick？我希望能够通过“这是标题”，并将其设置为div idit – 2013-02-13 03:49:13

asifisid88的范围的innerHTML，再次感谢您。对于像我这样的Jquery新手来说，你的帮助非常棒。你有什么需要做的，让IE浏览器鼠标坐标？这可以在Chrome和Firefox中使用（意思是在鼠标点击时显示div），但在IE中，div显示它在页面上的编码位置。 – 2013-02-13 14:45:18

这是因为'e.pageY和e.pageX'，在你的函数中传递了一个参数'event' ..所以函数调用将变为'showTitle（'msg'，event）'，函数将变为'function showTitle（message，evt）'，然后规范化其中的事件方法 – asifsid88 2013-02-13 15:44:44

根据您提供的情况下，这里的帮助：

$('#questionMarkId').hide(); 

$('a').on('click', function(e) { 
    e.preventDefault(); 
    $('#questionMarkId').css('position', 'absolute'); 
    $('#questionMarkId').css('top', e.pageY); 
    $('#questionMarkId').css('left', e.pageX); 
    $('#questionMarkId').show(); 
});

和提琴链接：http://jsfiddle.net/m6XPP/

来源

2013-02-12 05:26:19 hjpotter92

工作小提琴的人得到自动upvote – felickz 2013-02-12 05:31:44

@felickz如果是女孩呢？ – hjpotter92 2013-02-12 05:35:12

不少于两个upvotes – felickz 2013-02-12 05:36:06

为了得到即找到鼠标坐标，我不得不添加以下函数。我很惊讶没有更多的“jquery”方法来解决这个问题。再次感谢你的帮助！

var posx; 
var posy; 
if (typeof e.pageY === "undefined") 

    {  //will e work here? 
    posx = window.event.clientX + document.body.scrollLeft 
    + document.documentElement.scrollLeft; 
    posy = window.event.clientY + document.body.scrollTop 
    + document.documentElement.scrollTop; 

    alert("was undefined!"); 
    } 
else{ 


    posx = e.pageX; 
    posy = e.pageY; 
    alert("was NOT undefined!"); 

    } 
alert("posy:" + posy); 
alert("posX:" + posx);

来源

2013-02-13 21:07:33

仅供参考，当您使用'==='时，不需要'typeof'作为'==='本身也意味着检查'type' – asifsid88 2013-02-14 17:26:53

JQuery的：显示在鼠标位置一个隐藏的div时，点击一个链接

回答

相关问题