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

Question

我在具有 #box id 的 div 内创建了一个 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() 进行迭代。

Answer 2

您可以使用.data() 将动画附加到元素。例如：

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


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

注意。您在示例中使用了$('#box').each(...)，这意味着您希望在DOM 中有多个ID 为box 的元素。通常，ID 在 DOM 中应该是唯一的，因此我在此处的示例代码中删除了不必要的 each。