javascript - 如何触发/引用自定义 JavaScript 对象？

Question

我在一个 div 中用 #box id 创建了一个 javascript animation 对象，但我的问题是我不能在函数外引用动画对象。

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
});

Answer 1

在您的示例中，您将 jQuery 对象与 DOM 对象混合在一起，并且在一个地方使用一个对象，在其他地方使用另一个对象，由于它们不相同，因此您的代码无法正常工作。

当你这样做时:

element.animation = kkc; 

您正在向 DOM 对象添加名为 animation 的自定义属性。

当您尝试这样做时:

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

您正在尝试访问一个不存在的 jQuery 对象的自定义属性 animation。

---

如果您想坚持使用自定义 DOM 属性，可以使用此代码:

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

因为您的事件处理程序中的 this 是 DOM 对象。

---

更多的 jQuery 方法(避免将您自己的自定义属性添加到 DOM 对象)是这样的:

$('.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() 进行迭代。