如何觸發/引用自定義JavaScript對象？

我創建了一個javascript 動畫 div內的對象#box id，但我的問題是我無法引用該函數之外的動畫對象。如何觸發/引用自定義JavaScript對象？

http://codepen.io/vincentccw/pen/bfojB?editors=101

這裏是我的代碼：

$('#box').each(function(index, element) 
{ 
      var kkc = new TimelineLite({ 
      paused:true 
      }); 

      kkc.to($("#box") , .4, {left:100,ease:Power1.easeInOut}); 

      element.animation = kkc; 

}); 

$('#box').on('mouseenter', function(){ 
    $('#box').animation.play(); //this doesn't work 
});

來源

2014-06-22 Vincent Chua

在你的榜樣，你在其他地方混在一起的jQuery對象與DOM對象，並使用一個在一個地方和另一個並且由於它們不同樣的，你的代碼不起作用。

當你這樣做：

element.animation = kkc;

你加入一個名爲animation到DOM對象的自定義屬性。

當您嘗試這樣做：

$('#box').animation.play();

您正在嘗試一個jQuery對象不存在上訪問自定義屬性animation。

如果你想堅持使用自定義DOM屬性，你可以使用此代碼：

$('#box').on('mouseenter', function(){ 
    this.animation.play(); 
});

，因爲在事件處理this是DOM對象。

這樣做（以避免將自己的自定義屬性DOM對象）的更多jQuery的方法是這樣的：

$('.box').each(function(index, element) 
{ 
      var kkc = new TimelineLite({ 
      paused:true 
      }); 

      kkc.to($(this) , .4, {left:100,ease:Power1.easeInOut}); 

      $(element).data("animation", kcc); 

}); 



$('.box').on('mouseenter', function(){ 
    $(this).data("animation").play(); 
});

另外，我可能會問你爲什麼」重新使用$('#box').each()，因爲應該只有一個對象與#box選擇器相匹配，因此您不需要使用.each()進行迭代。

來源

2014-06-22 02:12:22 jfriend00

感謝您的解釋，實際上我只是在這個例子中簡化了我的問題，這樣你們就可以很容易地理解我的問題，但沒有意識到我使用了id，而不是class。我的實際代碼實際上由10個不同的元素組成，我需要單獨訪問它們而不重複我的代碼。這就是爲什麼我需要使用.each（）:) –

我已經使用jquery方式創建了另一個示例，但是，我似乎無法使其工作，並且出現「無效的左側分配」錯誤。 http://codepen.io/vincentccw/pen/Hiaqg?editors=101你能幫我解決這個問題嗎？非常感謝 –

@VincentChua - 在第一個'.data（）'行中，我的建議代碼（jQuery方式）存在拼寫錯誤。我修正了這個問題。我也修改了mouseenter事件處理程序來使用'$（this）'，所以如果你有多個你正在用事件處理程序監視的項目，並且已經將代碼切換到'.box'選擇器顯示它可以使用多個元素。 – jfriend00

您可以使用.data()將動畫附加到元素。例如：

var kkc = new TimelineLite({...}); 
// ... 
$('#box').data("animation", kkc); 


$('#box').on('mouseenter', function(){ 
    $('#box').data("animation").play(); 
});

NB。您在示例中使用了$('#box').each(...)，這意味着您期望在DOM中具有ID爲box的多個元素。通常，ID在DOM中應該是唯一的，所以我已經在示例代碼中刪除了不必要的each。

來源

2014-06-22 02:18:52 chrisg

其實我的代碼更復雜，上面的示例代碼只是我草稿，但沒有意識到我應該使用類而不是id。是的，我確實需要使用.each（）。 :) –

這是有道理的。如果您確實有多個操作元素，請注意'.data（）'只會獲取第一個元素的數據。因此，您需要執行以下操作來播放所有匹配元素的動畫：'$（「selector」）。each（function（i，el）{$（el）.data（「animation」）。play （）;}）' – chrisg

謝謝，這幫了我很多 –

如何觸發/引用自定義JavaScript對象？

回答

相關問題