2010-06-09 16 views
7

Ich versuche, ein Titelattribut für einen Link bei Hover zu entfernen und dann wieder auf Mouse-out. Ich würde gerne var HoverText an den Hover-Out übergeben ...jquery Hover pass Variable auf Callback-Funktion

Hier ist der Code, den ich habe. Irgendwelche Ideen?

$(".icon a").hover(function() { 
    $this = $(this); 
    var hoverText = $.data(this, 'title', $this.attr('title'));        
    $(this).find("em").animate({opacity: "show", top: "-35"}, "slow"); 
    $(this).find("em").text(hoverText);  

    $this.removeAttr('title');  


}, function(hoverText) {    

    $(this).find("em").animate({opacity: "hide", top: "-45"}, "fast");  
    $(this).attr("title", hoverText); 

}); 

Antwort

1

Setzen Sie "hoverText" als globale Variable.

var hoverText = ''; 
$(".icon a").hover(function() { 
    $this = $(this); 
    hoverText = $.data(this, 'title', $this.attr('title'));        
    $(this).find("em").animate({opacity: "show", top: "-35"}, "slow"); 
    $(this).find("em").text(hoverText);  

    $this.removeAttr('title');  


}, function() {    

    $(this).find("em").animate({opacity: "hide", top: "-45"}, "fast");  
    $(this).attr("title", hoverText); 

}); 
+1

das funktioniert, aber ich möchte von globalen Variablen keine Gedanken bleiben? –

+2

Das ist eine flipping schreckliche Lösung ... Beim Zuweisen von Hovern wird diese Variable definitiv nicht gleich bleiben. –

6
$(".icon a").hover(function() { 
    $this = $(this); 
    $.data(this, 'title', $this.attr('title'));        
    $(this).find("em").animate({opacity: "show", top: "-35"}, "slow"); 
    $(this).find("em").text(hoverText);  

    $this.removeAttr('title');  


}, function(hoverText) {    

    $(this).find("em").animate({opacity: "hide", top: "-45"}, "fast");  
    $(this).attr("title", $.data(this, 'title'); 

}); 

Der Trick ist:

$.data(this, 'title'); 

Wenn Sie Daten verwenden, sind Sie die Variable auf diesem dom Element für den ausdrücklichen Zweck effektiv speichern Sie gerade beschrieben habe. Sie könnten das Problem auch lösen, indem Sie die $ this-Variable über Ihrer anfänglichen Hover-Funktion deklarieren und den Bereich so erweitern, dass er beide abdeckt.

+0

das ist was ich habe versucht, herauszufinden, wie man es darüber deklarieren? irgendwelche Gedanken? –

+0

Genau das, was ich gesucht habe. Dies funktioniert hervorragend für einfache Tooltips. Hängen Sie das Tooltip-Markup in der ersten Funktion an an, speichern Sie das DOM-Objekt in einer Variablen, speichern Sie diese Variable im $ .data-Objekt, greifen Sie darauf in der zweiten Funktion zu, um es auszublenden. – Mike