afficher/masquer jQuery boîte de dialogue à la souris

Je suis en train de faire une carte de pointage de la souris sur une image qui doit afficher une boîte de dialogue lorsque la souris est au-dessus.
La boîte de dialogue contenu est différent, selon la région il est.

Mon script fait toujours afficher toutes les boîtes de dialogue.

Voici le jsFiddle j'ai créé :
http://jsfiddle.net/U6JGn/4/

et le 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" );
    });
}
});

Ce que je fais mal ?

OriginalL'auteur | 2014-01-07

  1. 4

    Affecter la boîte de dialogue à une variable et ensuite ne pas la file d'attente de plus d'événements avec jquery car il va briser votre code.

    Depuis les Id doivent toujours être unique, nous avons besoin de faire quelques changements dans votre code html et css

    id: #box0, #bloc1

    classe: .boîte

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


    exemple: jsfiddle

    Cela fonctionne pour l'affichage, mais je dois incrémenter la zone id ou une classe parce que je veux beaucoup de différentes zones de contenu. Cette solution présente l'une case seulement.
    Ensuite, votre #id doit être unique, #box0 #bloc1 etc, et puis votre classe doit être fort, je vais le mettre à jour.
    Ça y est ! Merci pour votre aide, j'ai été absent de la boîte à trucs.

    OriginalL'auteur Jorge Faianca

  2. 1

    Essayez ceci:

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

    Mise à JOUR:

    Prendre un coup d'oeil à la démo

    OriginalL'auteur Oleg

  3. 1

    http://jsfiddle.net/U6JGn/129/

    JQuery modifié le 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();
        });

    }


    });

    OriginalL'auteur Ravi_Mishra