Übergeben Sie $ (this) in setTimeout-Funktion in mouseover

Question

Ich versuche, ein div der Informationen in einem Balkendiagramm anzuzeigen, wenn der Benutzer für eine Sekunde über den Balken schwebt. Die Antworten auf diese Seite haben mich zu diesem Punkt gekommen

var timer; 
$(".session_hover").on({ 
    'mouseover': function() { 
      timer = setTimeout(function() { 
       $(this).children('.session_info').css({'top':175,'right':20}).fadeIn('fast'); 
      }, 1000); 
    }, 
    'mouseout' : function() { 
      clearTimeout(timer); 
    } 
}); 

Der obige Code funktioniert, wenn ich $(this) mit $(".session_hover") ersetzen, aber dann ist es natürlich löst alle anderen $(".session_hover") auf der Seite.

Wie kann ich $(this) in meine setTimeout Funktion übergeben, so dass es nur für das Kind-Element des div gilt, über dem ich schwebe?

Danke für Ihre Hilfe!

Answer 1

Versuchen Sie, eine Schließung um eine Variable zu schaffen $(this) zu erfassen, und es dann in Ihrer Funktion:

'mouseover': function() { 
     var $this = $(this); 
     timer = setTimeout(function() { 
      $this.children('.session_info').css({'top':175,'right':20}).fadeIn('fast'); 
     }, 1000); 
}, 

Beachten Sie, dass in modernen Browsern, auch this als Parameter an setTimeout, wie diese zur Verfügung stellen kann:

'mouseover': function() { 
     timer = setTimeout(function (t) { 
      $(t).children('.session_info').css({'top':175,'right':20}).fadeIn('fast'); 
     }, 1000, this); 
}, 

wenn Sie jedoch diese in IE arbeiten wollen < 9, benötigen Sie eine der polyfill Techniken in diesem MDN article beschrieben verwenden.

Answer 2

Sie müssen einen Verweis auf this außerhalb der SetTimeout halten.

var timer; 
$(".session_hover").on({ 
    'mouseover': function() { 
      var ctx = this; 
      timer = setTimeout(function() { 
       $(ctx).children('.session_info').css({'top':175,'right':20}).fadeIn('fast'); 
      }, 1000); 
    }, 
    'mouseout' : function() { 
      clearTimeout(timer); 
    } 
}); 

Eine weitere Alternative ist bind zu verwenden, die einen Teil von ECMAScript 5 (IE9 +) ist.

var timer; 
$(".session_hover").on({ 
    'mouseover': function() { 
      timer = setTimeout((function() { 
       $(this).children('.session_info').css({'top':175,'right':20}).fadeIn('fast'); 
      }).bind(this), 1000); 
    }, 
    'mouseout' : function() { 
      clearTimeout(timer); 
    } 
}); 

Here's a demo using Bind

Answer 3

So:

var timer; 
$(".session_hover").on({ 
    var self = this; 
    'mouseover': function() { 
      timer = setTimeout(function() { 
       $(self).children('.session_info').css({'top':175,'right':20}).fadeIn('fast'); 
      }, 1000); 
    }, 
    'mouseout' : function() { 
      clearTimeout(timer); 
    } 
});