JQuery 应用: 鼠标滑过td 显示td 的其他内容(方法二)

第二种:(Jquery $.post)

1. 鼠标进入td ,触发hover事件

2.获取到message的id,通过$.post 将id 传到 后台的messageAction ,查询到该 message 的内容

3.当message内容从后台返回后,$.post 调用回调函数,将返回的JSON数据解析后,交给mydiv 作为显示内容来显示

4.当鼠标从td 离开时,触发hover的第二个函数,将mydiv 隐藏

具体代码如下:

var startTime=0;
var endTime;

$(".message_id").css("cursor","pointer");
$(".message_id").hover(function(ee){
var dateTime=new Date();
endTime=dateTime.getTime();
if(endTime-startTime<=1000){
return false;
}

$thiss=$(this);
$locx=ee.pageX;
$locy=ee.pageY;

timeOutId=setTimeout(
function(){
$manager_id= $thiss.text();

$url1="messageAction!findMessage.action?message.id="+$thiss.attr("messageId");

$.post(
$url1,
function(json){

var data=eval((json.theaterString));

$(".mywindow").text(data[0].userName);
$(".mywindow").css("left",$locx).css("top",$locy);
$(".mywindow").css("display","block");
},
"json"
);
}
,300);
startTime=endTime;



},function(){
$(".mywindow").css("display","none");

clearTimeout(timeoutId);
return false;



})

如果用户频繁地或者无意的一直在table中滑动鼠标,而每次进入一个td都会调用ajax 来与后台进行交互,这样势必会对网络和后台服务器带来很大的开销,因此我使用了代码来控制用户的行为,要求前后两次mouseover 时间间隔必须大于1000毫秒

startTime=0

endTime=mouseover(time)

if(endTime-startTime<1000) 不执行

否则 发送请求,显示mydiv ,startTime=endTime;

如果用户刚进入td 立刻就离开了该 td 则表示他并不希望查看message 的内容,对于这种情况也要加以区别

我使用了setTimeout 来使mydiv 延迟500毫秒显示,如果在这500毫秒期间,用户离开了td ,则不发送请求

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值