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
Try this:
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);
}
UPDATE:
Take a look at the demo
http://jsfiddle.net/U6JGn/129/
Modified JQuery code....
$(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();
});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.