在鼠标悬停时显示/隐藏 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" );
    });
}
});

我究竟做错了什么 ？

Answer 1

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

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

id：#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" );
                });
          });
    });

工作示例：jsfiddle