不能在“每一个”函数中使用“此”来瞄准div

Question

所以我只想让这些老鼠在你点击它们的随机时间后恢复过来。我试图使用每个函数来针对每个.mouse div，这很好，但是如果我再次在settimeout函数中添加'this‘，它们就不会回来了。如果我针对一个特定的鼠标，如下面的示例所示，那么1就会像预期的那样返回。很明显，它没有将每个函数的“this”转换为下一个函数。

下面的代码是“.mout-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

绑定它，这样您就可以在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));

    });

});

演示

Answer 2

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

$(this).click(function() {
var $mouse = $(this); 
$(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.animate({
 'background-position-x': '0',
 'background-position-y': '0'});
            },  rand);

    });

});

});

Answer 3

试试这个：

```javascript

$(‘.myMouse’).each(函数(){)

$(This).click(函数(){)

变量=这个；

$(this).animate({

背景-位置-x‘：'0'，

‘背景-位置-y’：‘40 position’

}，300，函数(){

变量rand = Math.round(Math.random() * (7000 - 2000)) + 500；//在7秒和2.5秒之间

setTimeout(函数(){

$(that).animate({

背景-位置-x‘：'0'，

‘背景-位置-y’：‘0’}；

        },  rand);

});

})；

})；