重复绑定mouseover和mouseout事件

最新推荐文章于 2024-02-28 17:01:47 发布

六月的星星

最新推荐文章于 2024-02-28 17:01:47 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：成长路程文章标签： js

本文链接：https://blog.youkuaiyun.com/u012157999/article/details/53766360

成长路程专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一种使用JavaScript和layer插件实现鼠标悬浮在日历日期上显示该日新建日程数量的方法。通过获取指定用户的日程数据，并在有日程记录的日期上绑定鼠标事件，当鼠标悬浮于这些日期时，会弹出提示框展示该日的日程数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标悬浮日期上显示日程数量

我需要实现鼠标悬浮在日期显示提示信息，提示信息用了layer插件，提示信息内容是新建的日程数量，效果图如下：

鼠标放在17号显示了当前日期新建了19条日程记录，这里需要在初始化日历的时候，为有日程记录的日期绑定事件，重复绑定的时候，显示的提示信息是不一样的。代码如下：

                      myCals: function(){
				
				var usrid=document.getElementById("userIds").value;  //当前用户
				var nowMonths=document.getElementById("nowMonth").value;  //当前月
				var nowYears=document.getElementById("nowYear").value;  //当前年
				var time=nowYears+"-"+nowMonths;    //当前时间
				$.get("/Liems/xslt/getAjaxText.jsp?&className=net.luculent.liems.l3p.portlets.mycals.Mycals&methodName=getScheduleNum&canshu="+usrid+"&time="+time,null,function(data){
					for(var i=0;i<data.num.length;i++){	
						if(data.num[i]!='0'){	
							$("#"+data.time[i]+"").css("color","red");
							$("#"+data.time[i]+"").on("mouseover mouseout",function(event){
								if(event.type == "mouseover"){
									//鼠标悬浮
									$.get("/Liems/xslt/getAjaxText.jsp?&className=net.luculent.liems.l3p.portlets.mycals.Mycals&methodName=getScheduleNumByDay&canshu="+usrid+"&time="+event.target.id,null,function(datas){	
										var dates=$("#"+event.target.id+"");
										layer.tips('您有'+datas.num+'条日程记录！',dates,{
											tips: [2, '#3595CC'],
											time: 4000
										});
									},"json");
								}else if(event.type == "mouseout"){
									layer.closeAll('tips'); //关闭所有的tips层    
								}
								
								
							});
						}
					}
				},"json");
			},

之前一直没有明白绑定事件后执行的方法，是在触发的时候才执行里面的方法，不是重复绑定事件，给它一个值