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

Question

我正在尝试在图像上创建一个鼠标悬停 map 区域，当鼠标悬停在上面时必须显示一个对话框。对话框内容因所在区域不同而不同。

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

这是我创建的 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 进行一些更改

ids: #box0, #box1

类:.box

$(函数() {
         $('.box').each(function(k,v){//遍历所有带有 .box 类的 Div
               var box = $(this).dialog({ modal:true, resizable:false,autoOpen: false });
                    $(this).parent().find('.ui-dialog-titlebar-close').hide();

                 $( "#elem"+k ).mouseover(function() {//k = 来自每个循环的键
                    box.dialog("打开");
                    }).mouseout(函数() {
                    box.dialog("关闭");
                });
          });
    });

工作示例:jsfiddle