Question

我通常设法让（这个）在JQuery中工作，但在这个特定的情况下，它根本不起作用。

我有一个文章列表，每篇文章都有一个带照片的div。但是如果一篇文章有很多照片不能适合div的常规高度（430px），那么将照片保存在文章div中的div应该有溢出滚动。使用setTimeout延迟进行溢出滚动的css操作。但是，如果我不使用这个选择器，当我只悬停其中一个时，所有文章都会溢出滚动。为了使这个效果只对我悬停的特定div我必须使用这个选择器，但是当我这样做时，没有任何反应。

这是我的代码：

$(document).ready(function() {
    $(".scrapPhotosThree").mouseover(function() {
        setTimeout(function () {
            $(this).css( "overflow", "scroll" );
        }, 1000);
    });

    $(".scrapPhotosThree").mouseout(function() {
        setTimeout(function () {
            $(this).css( "overflow", "hidden" );
        }, 1000);
    });
});

当我将$（this）.css ...替换为$（“。scrapPhotosThree”）。css ...时，效果会显示当我只悬停一个文章时所有文章都会发生变化。

谁知道如何解决这个问题？

Answer 1

在setTimeout()调用的函数内部，this将是全局对象，而不是您正在使用的元素。

您可以在本地变量（有时名为this或that）中缓存self并在延迟函数中使用该变量，或者可以将延迟函数绑定到当前变量this与$.proxy()：

$(".scrapPhotosThree").mouseover(function() {
    setTimeout($.proxy(function() {
        $(this).css("overflow", "scroll");
    }, this), 1000);
});

请注意，最新版本的Javascript会公开Function.bind()方法，该方法提供与$.proxy()相同的功能。

Answer 2

我不是100％肯定，但我会尝试这样的事情：

$(document).ready(function() {
    $(".scrapPhotosThree").mouseover(function() {
        var _this = $(this);
        setTimeout(function () {
            $(_this).css( "overflow", "scroll" );
        }, 1000);
    });

当你把setTimeout置于其间时，它并不是＆＃34;在＆＃34; .mouseover了，所以你相信我会得到一个不同的元素。

JQuery延迟溢出但（这）不起作用

2 个答案: