javascript - 无法在 'this' 函数内的函数内使用 'each' 定位 div

Question

因此，我只想让这些鼠标在您点击它们时经过一段随机时间后重新出现。我正在尝试使用每个函数来定位每个 .mouse div，这工作正常，但是如果我再次将“this”放入 settimeout 函数中，它们就不会返回。如果我将 1 个特定鼠标作为目标，如下例所示，1 会按预期返回。它显然没有将每个函数的“this”带入下一个函数。

下面的代码有 '.mouse-1' 但这是我想要 'this' 的地方

http://thetally.efinancialnews.com/tallyassets/wackamouse/index.html

<div class="container">
  <div class="mice">
    <div class="mouse mouse-1"></div>
    <div class="mouse mouse-2"></div>
    <div class="mouse mouse-3"></div>
    <div class="mouse mouse-4"></div>
    <div class="mouse mouse-5"></div>
    <div class="mouse mouse-6"></div>
    <div class="mouse mouse-7"></div>
    <div class="mouse mouse-8"></div>
    <div class="mouse mouse-9"></div>
  </div>
</div>

^ html 非常简单。将鼠标绝对定位在图像上。他们只需要躲起来然后在随机时间后回来

$('.mouse').each(function() {

$(this).click(function() {

$(this).animate({
'background-position-x': '0',
'background-position-y': '40px'
}, 300, function() {

var rand = Math.round(Math.random() * (7000 - 2000)) + 500; //between 7secs and 2.5 secs
setTimeout(function(){
    $('.mouse-1').animate({
 'background-position-x': '0',
 'background-position-y': '0'});
            },  rand);

    });

});

});

另外，在旁注中，我希望鼠标 div 在按下时无法点击

非常感谢

Answer 1

绑定(bind)它，这样你就可以在 setTimeout 的范围内拥有它:

 $('.mouse').each(function () {

    $(this).click(function () {

        $(this).animate({
            'background-position-x': '0',
                'background-position-y': '40px'
        }, 300, function () {

            var rand = Math.round(Math.random() * (7000 - 2000)) + 500;
            setTimeout(function () {
                $(this).animate({
                    'background-position-x': '0',
                        'background-position-y': '0'
                });
            }.bind(this), rand);

        }.bind(this));

    });

});

Demo