les variables jQuery pour plusieurs événements

Question

Je voudrais être en mesure de définir la variable que je peux alors utiliser pour d'autres événements, tels que mouseout, mouseenter, cliquez etc.

Voici le code actuel:

$('a div') 

    // Get the width an height of the image 
    //var $img_width = $(this).children('img').width(); 
    //var $img_height = $(this).children('img').height(); 

    .mouseenter(function() { 
     alert($img_width) 

    }) 
    .mouseleave(function() { // Animate the image back to it's original size 
     alert($img_width); 
    }) 
    .each(function(index) { 
     alert($img_width); 
    }); 

Answer 1

Essayez ceci, cela devrait vous fournir la gestion des événements dont vous avez besoin, et sur mouseover mouseout. Chaque fois que vous passez la souris sur une image, vous pouvez la renvoyer avec $ (this), donc dans ce gestionnaire en ligne, vous pouvez faire ce que vous voulez avec l'élément spécifié.

Il y a des tas d'autres événements qui vivent peut gérer aussi, s'il vous plaît lire sur si vous voulez. http://api.jquery.com/live/

$('a div').live('mouseover mouseout', function(event) { 

    var $img_width = $(this).children('img').width(); 

    if(event.type == 'mouseover'){ 
     //do stuff on mouse over 
    } 
    else if(event.type == 'mouseout'){ 
     //do stuff on mouseout 
    } 

    alert($img_width); 

}); 

EDIT Je vois que vous vérifiez pour les enfants dans la div que vous avez l'événement lié. Vous feriez probablement mieux de référencer l'img directement dans le gestionnaire d'événements. Ensuite, vous pouvez obtenir la largeur tout de suite sans avoir à traverser le DOM.

$('a div img').live('mouseover mouseout', function(event) { 

Bonne chance!

Answer 2

Si vous échangez votre code un peu, vous pouvez utiliser la fermeture qui .each() crée à votre avantage, comme ceci:

$("a div").each(function(index) { 
    var $img_width = $(this).children('img').width(); 
    var $img_height = $(this).children('img').height(); 

    $(this).mouseenter(function() { 
    alert($img_width) 
    }).mouseleave(function() { 
    alert($img_width); 
    }); 

    alert($img_width); 
}); 

You can test it out here.

Cela définit les variables pour chaque élément correspondant, et c'est la valeur que vous obtiendrez dans les fonctions liées, spécifiques à chaque <div> comme vous le souhaitez. En remarque, <div> (ou n'importe quel élément de bloc) n'est pas un enfant légal de <a>, vous pouvez donc vouloir revoir le balisage si possible.