如何使用 setTimeout 在悬停功能中访问 $(this)

Question

我有这段代码来显示我创建的工具提示。它会在鼠标悬停 2 秒后显示。

/* Custom Shop Page Toolip */
var timeout;
$('.product-bottom-info-container').hover(
    var that = this;
    function(e) {
        timeout = setTimeout(function() {
            that.find('.product-custom-tooltip-container').css({
                display: 'inline-block',
                position: 'fixed',
                zIndex: '5000',
                margin: '10px',
                whiteSpace: "nowrap"
            }).position({
                my: "right top",
                at: "left bottom",
                of: e,
                collision: "fit"
            });
        }, 2000);
    }, 
    function() {
        clearTimeout(timeout);
        that.find('.product-custom-tooltip-container').hide();
    }
);

调用setTimeout() 后，我无法再访问$(this)，它正在引用.product-bottom-info-container 选择器。

所以我尝试创建一个变量 - var that = $(this) 。我在该行收到一个错误Unexpected token var。

我也试过var that = this，还是不行。

如何在setTimeout() 函数中访问$(this)？

我一直在阅读各种示例，namely this one，它似乎对某些人有用，但对我不起作用。

Answer 1

您的代码的问题是语法错误。这样做时，您也没有在这里使用$：

/* Custom Shop Page Toolip */
var timeout;
$('.product-bottom-info-container').hover( // Here you should give your parameters, and you cannot have a ; here.
    var that = this;
    function(e) {
        timeout = setTimeout(function() {
            that.find('.product-custom-tooltip-container').css({
                display: 'inline-block',
                position: 'fixed',
                zIndex: '5000',
                margin: '10px',
                whiteSpace: "nowrap"
            }).position({
                my: "right top",
                at: "left bottom",
                of: e,
                collision: "fit"
            });
        }, 2000);
    }, 
    function() {
        clearTimeout(timeout);
        that.find('.product-custom-tooltip-container').hide();
    }
);

将您的代码更改为以下代码应该可以：

var timeout;
$('.product-bottom-info-container').hover(function(e) {
  // 1. Wrap your this inside $().
  var that = $(this);
  timeout = setTimeout(function() {
    that.find('.product-custom-tooltip-container').css({
      display: 'inline-block',
      position: 'fixed',
      zIndex: '5000',
      margin: '10px',
      whiteSpace: "nowrap"
    }).position({
      my: "right top",
      at: "left bottom",
      of: e,
      collision: "fit"
    });
  }, 2000);
}, function() {
  clearTimeout(timeout);
  // 2. You can use $(this) here as it is the second function, and this refers to the element that triggered the event.
  $(this).find('.product-custom-tooltip-container').hide();
});

需要做的两件事是：

1. 将this 包裹在$(this) 中。
2. 在.hover() 函数的第二个参数中使用$(this)。