在鼠标hover时显示/隐藏jQuery对话框

我正在尝试在图像上创建鼠标hover地图区域，当鼠标结束时必须显示一个对话框。 对话框内容不同，具体取决于它所在的区域。

我的脚本实际上总是显示所有对话框。

这是我创建的jsFiddle： http ： //jsfiddle.net/U6JGn/4/

和javascript：

$(function() { $('#box').dialog( { modal:true, resizable:false } ).parent().find('.ui-dialog-titlebar-close').hide(); for (var i = 0; i < 2; i++) { $( "#elem"+i ).mouseover(function() { $( ".box"+i ).dialog( "open" ); }); $( "#elem"+i ).mouseout(function() { $( ".box"+i ).dialog( "close" ); }); } }); 

我究竟做错了什么 ？

Answer 1

将框对话框分配给变量，然后不要将更多的jquery事件排入队列，因为它会破坏您的代码。

由于Ids需要始终是唯一的，我们需要在你的html和css中做一些改变

ids：＃box0，＃box1

class：.box

 $(function() { $('.box').each(function(k,v){ // Go through all Divs with .box class var box = $(this).dialog({ modal:true, resizable:false,autoOpen: false }); $(this).parent().find('.ui-dialog-titlebar-close').hide(); $( "#elem"+k ).mouseover(function() { // k = key from the each loop box.dialog( "open" ); }).mouseout(function() { box.dialog( "close" ); }); }); }); 

工作示例： jsfiddle

Answer 2

试试这个：

 for (var i = 0; i < 2; i++) { (function(i) { $( "#elem"+i ).mouseover(function() { $( ".box"+i ).dialog( "open" ); }); $( "#elem"+i ).mouseout(function() { $( ".box"+i ).dialog( "close" ); }); })(i); } 

更新：

看看演示

Answer 3

http://jsfiddle.net/U6JGn/129/

修改了JQuery代码….

 $(document).ready(function() { for (var i = 0; i<= 1; i++) { $( "#elem"+i ).on('mouseenter',function() { var st = $(this).attr('Id').replace('elem',''); $( ".box" + st).css('display',''); }); $( "#elem"+i ).on('mouseout',function() { var st = $(this).attr('Id').replace('elem',''); $( ".box"+st ).hide(); }); } });