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

Question

我正在尝试在图像上制作一个鼠标悬停的地图区域，当鼠标悬停时必须显示对话框。对话框内容因所在区域而异。

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

这是我创建的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" );
    });
}
});

我做错了什么？

- user2094540

Answer 1

将对话框分配给一个变量，然后不要在它上面排队更多的jQuery事件，因为这会破坏你的代码。

由于Ids始终需要是唯一的，因此我们需要对您的html和css进行一些更改

ids: #box0，#box1

类：.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" );
                });
          });
    });

working example: jsfiddle

- Jorge Faianca

---

这对于显示是有效的，但我必须递增框的ID或类，因为我想要许多不同框的内容。这个解决方案只显示一个框。 - user2094540

那么你的 #id 应该是唯一的，#box0 #box1 等等，然后你的类应该是 box，我会更新它。 - Jorge Faianca

就是这样！感谢您的帮助，我之前漏掉了盒子的东西。 - user2094540

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);
}

更新：

查看演示。

- Oleg

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();
        });

    }


    });

- Ravi_Mishra