在鼠标悬停中将$（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函数

回答

相关问题