javascript 在鼠标悬停时显示/隐藏 jQuery 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20969780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show/hide jQuery dialog box on mouseover
提问by Jorge Faianca
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/
这是我创建的 jsFiddle：http: //jsfiddle.net/U6JGn/4/
and the javascript :
和 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 ?
我究竟做错了什么 ？
回答by Jorge Faianca
Assign the box dialog to a variable and then don't queue more jquery events with it because it will break your code.
将框对话框分配给一个变量，然后不要将更多的 jquery 事件与它一起排队，因为它会破坏您的代码。
Since Ids need always to be unique we need to do some changes in your html and css
由于 Id 需要始终是唯一的，因此我们需要对您的 html 和 css 进行一些更改
ids: #box0, #box1
ID：#box0，#box1
class: .box
类别：.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" );
});
});
});
working example: jsfiddle
工作示例：jsfiddle
回答by Oleg
回答by Ravi_Mishra
http://jsfiddle.net/U6JGn/129/
http://jsfiddle.net/U6JGn/129/
Modified JQuery code....
修改 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();
});
}
});
