假设我的页面中有 2 个链接，并且我希望在单击任一链接时，隐藏的 div 出现在页面上鼠标所在的位置（鼠标 x，y）。另外，我想传入一个值来设置 div 的标题（请参阅 divTitle id）。
我怎样才能使用 jQuery 来完成这项工作？
隐藏分区：
<div class="boxFAQ" id="questionMarkId">
<span id="divTitle"></span>
SHOW ME!
</div>
【问题讨论】：
标签： jquery html click mouseevent hidden
下面的代码将为您提供有关显示 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
}
【讨论】：
e.pageY and e.pageX，在你的函数中再传递一个参数event..所以函数调用会变成showTitle('msg', event)，函数会变成function showTitle(message, evt)，然后规范化事件方法它
根据您提供的上下文，这里有一个帮助：
$('#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/
【讨论】：
为了让 ie 找到鼠标坐标，我必须在函数中添加以下内容。我很惊讶没有更多的“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);
【讨论】：
=== 时，则不需要使用typeof，因为=== 本身意味着还要检查type
当我刚刚登陆此页面时，也许将来会帮助某人 - 但这是我的解决方案
$(document).ready(function() {
$('.hider').hide();
$(document).mousemove(function(event) {
var x = event.pageX;
var y = event.pageY;
//output mouse movements
//console.log(x + y);
$('h3').html("X="+x+"Y="+y+"");
$(document).on('click',function(event) {
$('.hider').show();
$('.hider').css({'background-color' : 'red','width' : '250px','height' : '250px','position' : 'absolute','top': y,'left' : x});
});
});
});
【讨论】：