javascript - 在鼠标悬停时将 $(this) 传递给 setTimeout 函数

标签 javascript jquery html css

<分区>

如果用户将鼠标悬停在条形图上一秒钟,我将尝试在条形图上显示信息的 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 的子元素?

感谢您的帮助!

最佳答案

尝试围绕一个变量创建一个闭包来捕获 $(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 中描述的 polyfill 技术之一。 .

关于javascript - 在鼠标悬停时将 $(this) 传递给 setTimeout 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21866914/

相关文章:

javascript - 有没有 jsPlumb 的替代品? (为了连接 DOM 元素)

javascript - 从多个表单字段获取数据并动态创建 JSON 字符串

javascript - Angular 2 中多个元素的单击处理程序

javascript - 如何将输入字段 Html 中的数据追加(存储)到 Json 文件

html - 显示行内 block 。如何防止将 block 推到新行?

javascript - aria-label 和 aria-labelledby 之间的区别

javascript - Firefox:按 Shift 或 CTRL 时未选中 JQuery-UI 复选框

ajax - 如何在jQuery中实现多线程

javascript - 如何显示和隐藏内部 div onclick 最多 3 个级别?

javascript - 如何浏览一个javascript对象