2

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

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

this它很有用，因此在这些匿名函数中，我们可以通过or访问元素$(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？

4

1 回答 1

3

如果您想使用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();
}
于 2013-06-11T18:46:05.900 回答