Question

我正在尝试为孩子的mouseover事件添加一个简单的延迟并且遇到困难。（还在学习！）

这使我能够在延迟后显示弹出窗口，但同时显示所有这些：

onmouseover='setTimeout(function() { $(\".skinnyPopup\").show(); }, 600)'

这样可以毫不拖延地显示我想要的弹出窗口：

onmouseover='$(this).children(\".skinnyPopup\").show()'

但组合不会：

onmouseover='setTimeout(function() { $(this).children(\".skinnyPopup\").show(); }, 600)'

任何帮助将不胜感激。谢谢！

Answer 1

你需要定义this执行时的内容，这样的事情会起作用：

setTimeout($.proxy(function() { $(this).children(".skinnyPopup").show(); }, this), 600)

或者只使用.delay()，如下所示：

$(this).children(".skinnyPopup").delay(600).show(0);

以上两种都是快速解决方法，我建议您远离内联处理程序并查看unobtrusive方法（由this answer Russ Cam出于某些原因），例如：

$(function() {
  $('selector').mouseover(function() {
    $(this).children(".skinnyPopup").delay(600).show(0);
  });
});

Answer 2

这是因为this绑定到全局上下文，而不是元素。请改用以下内容：

// put this in your document head -- replace element with a selector for the elements you want
$(function () {
    $(element).bind("mouseover", function () {
       var e = $(this);
       setTimeout(function () { e.children(".skinnyPopup").show(); }, 600);
    });
});

如果您坚持内联事件处理程序，以下内容也应该有效：

onmouseover='var self = this; setTimeout(function() { $(self).children(\".skinnyPopup\").show(); }, 600)'

在鼠标悬停时向jquery事件添加延迟

2 个答案: