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()后，我无法再访问引用 .product-bottom-info-container 选择器的$(this)。

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

我也尝试了var that = this，这也行不通。

如何在$(this)功能中访问setTimeout()？

我一直在阅读各种各样的例子，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();
});

需要做的两件事是：

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

如何使用setTimeout在我的悬停函数中访问$（this）

1 个答案: