Question

如果用户在栏上盘旋一秒钟，我试图在条形图上显示一些信息。这个网站上的答案让我到了这一点

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的子元素？

感谢您的帮助！

Answer 1

尝试围绕变量创建闭包以捕获$(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中使用它＆lt; 9，您需要使用本MDN article中描述的一种polyfill技术。

Answer 2

您需要在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

Answer 3

像这样：

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

在mouseover中将$（this）传递给setTimeout函数

3 个答案: