在鼠標懸停中將$（this）傳遞給setTimeout函數

如果用戶將鼠標懸停在條上一秒，我試圖在條形圖上顯示信息的div。本網站上的答案已經得到了這個地步

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

上面的代碼工作，當我更換$(this)與$(".session_hover")但後來，當然它會觸發所有其他$(".session_hover")在頁面上。

如何將$(this)傳入我的setTimeout函數，以便它只適用於我懸停在div上的子元素？

感謝您的幫助！

來源

2014-02-18 Reed Raymond

的 '是=該' 趨勢真的anoys我，爲什麼不能給予的是什麼名字！：） –

嘗試創建圍繞變量的閉合來捕捉$(this)，然後在你的函數中使用它：

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

注意，在現代瀏覽器中，您也可以提供this作爲參數傳遞給setTimeout，就像這樣：

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

但是，如果你想這在IE < 9時，您需要使用這個MDN article描述的填充工具技術之一。

來源

2014-02-18 22:34:10

我喜歡使用'closure'和'$ this' – xpy

+1不僅使用變量名'$ this'，而且提到'setTimeout'的新方法 – Fresheyeball

不知道你可以傳遞上下文給setTimeout，就像那樣。偉大的功能！ –

您需要在setTimeout之外保留對this的引用。

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

另一種替代方法是使用bind這是ECMAScript的5（IE9 +）的一部分。

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

來源

2014-02-18 22:34:18

像這樣：

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

來源

2014-02-18 22:34:45 inorganik

在鼠標懸停中將$（this）傳遞給setTimeout函數

回答

相關問題