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事件，因为它会破坏你的代码。

由于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" );
                });
          });
    });

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

<强>更新

查看demo

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

    }


    });

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

3 个答案: