無法在每個函數內部使用'this'作爲目標div

所以我只想讓這些鼠標在點擊它們的隨機時間後回來。我試圖使用每個函數來定位每個.mouse div，這很好，但是如果我再次在settimeout函數中放置'this'，它們不會回來。如果我的目標是1個特定的鼠標，就像下面的例子那樣，1會按照預期返回。它顯然不會將每個功能的'這個'帶入下一個功能。無法在每個函數內部使用'this'作爲目標div

下面的代碼有」 .mouse-1' ，但是這是我想 '這'

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到無法點擊，當他們去了

非常感謝

來源

2014-10-09 bboybeatle

的可能重複[使用Javascript回調失去 '這個'（http://stackoverflow.com/questions/10766407/javascript-callbacks-losing - 這個） – cdhowie 2014-10-09 16:38:24

1.包括小提琴或其他東西將有助於 - 至少是HTML。（ '鼠標'）： 2.林不知道對於某些這是否會工作或沒有，但嘗試每個$（函數（）{ VAR是這個=; ... 然後使用'that'在$ setTimeout函數中引用每個鼠標？ – Pytth 2014-10-09 16:41:36

您可以使用'var ref = this;'然後使用ref而不是這個 – Zac 2014-10-09 16:56:40

這個綁定，所以你可以把它在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

來源

2014-10-09 16:38:57

謝謝，但這似乎不適用於我 – bboybeatle 2014-10-09 16:42:18

@bboybeatle sec改編它你的代碼檢查編輯的演示 – 2014-10-09 16:43:07

只需要適應您的蘭特功能的時間，除了應該工作正常。 – 2014-10-09 16:45:05

$('.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); 

    }); 

}); 

});

來源

2014-10-09 16:45:56

這也工作。謝謝。我可能會使用它，因爲我理解的概念不僅僅是綁定 – bboybeatle 2014-10-09 17:00:03

綁定只是將上下文傳遞給函數。 – 2014-10-09 17:05:17

試試這個：

```

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

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

    }); 

}); 

});

來源

2014-10-09 16:51:11 Pytth

無法在每個函數內部使用'this'作爲目標div

回答

相關問題