Typescript将被jquery覆盖

Typescript this being overriden by jquery hover

本文关键字：覆盖 jquery 将被 Typescript      更新时间：2023-09-26

当您使用像$(".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?

如果你想使用从回调中提供的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();
}
相关文章：