Question

所以我正在尝试创建一个可重用的函数，我的页面上的每个.featured-image都使用它。如果我不使用骨干事件：我只是编写注释掉的代码，它的工作原理。如何获取事件imageOver和imageOut模仿注释代码？

app.newsroomPageElementView = Backbone.View.extend({

 events: {
        'mouseenter .featured-image': 'imageOver',
        'mouseleave .featured-image': 'imageOut'
     },

      initialize: function () {
        $(".featured-image").each(function(index, element){
        var tl = new TimelineLite({paused:true});
        tl.to(element, 0.2, {opacity:.9, scale:.9})
        .to(element, 0.2, {backgroundColor:"#004", color:"orange"}, "-=0.1")
        element.animation = tl;
        })

     // This part works if i don't use imageOver and imageOut

     // $("li").hover(over, out);

     // function over(){
     //   this.animation.play();
     // }

     // function out(){
     //  this.animation.reverse();
     // }

        },

        imageOver: function (e) {
            // What goes here?
        },
        imageOut: function (e) {
            // What goes here?
        }

    });

Answer 1

使用事件哈希，您可以通过event对象访问事件目标，并仍然通过this访问视图实例

  imageOver: function (event) {
      $(event.target).animation.play();
  },

Answer 2

    imageOver: function (event) {
        var target = event.currentTarget;
        // What goes here?
        target.animation.play();
    },
    imageOut: function (event) {
        var target = event.currentTarget;
        // What goes here?
        target.animation.reverse();
    }

如何将鼠标的currentTarget传递给timelineMax函数

2 个答案: