鼠标悬停时显示/隐藏jQuery对话框 [英] show/hide jQuery dialog box on mouseover

问题描述

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

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

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

我在做什么错?

解决方案

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

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

id:#box0，#box1

class:.box

工作示例: jsfiddle

I'm trying to make a mouseover map area on an image that must display a dialog box when the mouse is over. The dialog box content is different, depending on which area it is.

My script actually always show all the dialog boxes.

Here is the jsFiddle I created : http://jsfiddle.net/U6JGn/4/

and the 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" );
    });
}
});

What am I doing wrong ?

解决方案

Assign the box dialog to a variable and then don't queue more jquery events with it because it will break your code.

Since Ids need always to be unique we need to do some changes in your html and 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" );
                });
          });
    });

working example: jsfiddle

这篇关于鼠标悬停时显示/隐藏jQuery对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！