Question

我有一个缩略图列表。当我点击缩略图时，我希望图像在半秒后加载。这是我的代码：

$('ul#thumbs li img').click(function() {

    setTimeout(function() {
        $('img#image').attr("src", $(this).attr("src").replace("_thumb", ""));
    }, 500);

});

当我点击其中一个拇指时，没有任何反应。如果我删除了setTimeout函数，并且只是立即加载图像，它就可以正常工作。

有人知道为什么事件不会开火吗？

Answer 1

this不是您认为的那样。当您使用setTimeout时，this不再是函数执行时对当前元素的引用。

您需要确保跟踪正确的元素，如下所示：

$('ul#thumbs li img').click(function() {
    var thumbImg = this;
    setTimeout(function() {
        $('img#image').attr("src", $(thumbImg).attr("src").replace("_thumb", ""));
    }, 500);

});

Answer 2

问题是超时功能中this的范围试试这个：

$('ul#thumbs li img').click(function() {
    var self = $(this);
    setTimeout(function() {
        $('img#image').attr("src", self.attr("src").replace("_thumb", ""));
    }, 500);

});

甚至更好：

$('ul#thumbs li img').click(function() {
    var src = $(this).attr("src").replace("_thumb", "");
    setTimeout(function() {
        $('img#image').attr("src", src);
    }, 500);

});

jQuery setTimeout - 用于更新数据时无法正常工作

2 个答案: