jQuery 显示/隐藏的 SetTimeout div 不起作用

Question

我正在写一个 jQuery，它应该是 show/hide 单击图像后的一系列图像。它基本上是在 onClick 事件时隐藏当前图像并显示下一张图像。

到目前为止我编写的功能除了一个功能外都有效：在图像 3 上，我想设置一个计时器然后切换到图像 4，即使用户没有点击它也是如此。

我正在使用 setTimeout 并且超时触发，只是它不会切换到下一张图像。

这是我的功能：

(function($) { 
    $(document).ready(function () {
        var count = 0;
        $('.squirrel').click(function () {          
            $(this).hide();
            var next = $(this).next();
            if (next.length == 0){
                next = $(this).parent().find('.squirrel').first();
                count = -1;
            }            
            next.show();            
            if (count == 1) {
                setTimeout(
                    function() {
                        alert("Should switch to 4 now but it doesn't work");                            
                        $(this).hide();
                        var next = $(this).next();          
                        next.show();
              
                        count++;
                    }, 2000
                );
            } else {            
                count++;            
            }       
        });
    });
})(jQuery);

这是HTML:

<div id="squirrelContainer">
    <img src="1.png" class="squirrel default">
    <img src="2.png" class="squirrel">
    <img src="3.png" class="squirrel" id = "3">
    <img src="4.png" class="squirrel">
</div>

这是一个JSFiddle。

Answer 1

因为您使用的是同一张图片，而不是下一张。

(function($) { 
$(document).ready(function () {
    var count = 0;
$('.squirrel').click(function ()
{
    $(this).hide();
    var next = $(this).next();
    if (next.length == 0)
    {
        next = $(this).parent().find('.squirrel').first();
        count = -1;
    }            
    next.show();
        
    if (count == 1) 
    {
        let that = $(this).next();
        setTimeout(
        function() 
        {
             console.log("Should switch to 4 now but it doesn't work");
                        
            that.hide();
            var next = that.next();          
            next.show();
            count++;
        }, 2000
        );
    } 
    else 
    {
        count++;
    }
});
});
})(jQuery);

https://jsfiddle.net/dyt9opLz/

jQuery 显示/隐藏的 SetTimeout div 不起作用

jQuery SetTimeout for Show / Hide div does not work

javascript

jquery

settimeout

show-hide