Question

当你使用像$(".element").hover(functionHoverIn,functionHoverOut)这样的jquery悬停绑定时，jquery似乎传递了悬停为this的元素。像这样：

$('.element').hover(function(e) { 
         $(this).attr("data-hovered", "true");
         //do whatever else
     }, function(e) {
         //etc
     }
}

它非常有用，因此在这些匿名函数中，我们可以通过this或$(this)访问该元素。但是，它似乎与打字稿相冲突。或许我不明白：

class FancyHover {
    HoverElement:JQuery;

    constructor(HoverElement:JQuery) {
        this.HoverElement = HoverElement;
        this.HoverElement.hover(this.HandleHover, this.HandleHover);
    }

    HandleHover(event:JQueryEventObject):void {
        $(event.currentTarget).toggleClass("hovered");

        this.OtherFunction(); //Throws error
        //Uncaught TypeError: Object #<HTMLDivElement> has no method 'OtherFunction' 
    }

    OtherFunction():void {
        //do anything
    }
}

理想情况下，我希望将函数（例如this.HandleHover）传递给.hover(functionIn,functionOut)调用而不是匿名函数。但是，当我这样做时，我失去了引用当前FancyHover实例的能力。也许我可以以某种方式将当前实例传递给函数HandleHover？

Answer 1

如果您想使用回调提供的this以及类实例的this，您需要手动执行此操作，例如：

constructor() {
    // ...
    var self = this;
    this.HoverElement.hover(function(event) { self.HandleHover(event, this); });
}

HandleHover(event: JQueryEventObject, jqueryThis: JQuery) {
    $(jqueryThis).attr(/*etc*/);
    this.OtherFunction();
}

打字稿这被jquery悬停覆盖

1 个答案: