jquery-ui - 我无法从私有方法中读取 jQuery-UI 小部件工厂选项

Question

我是 jQueryUI 小部件工厂的新手，因此我要问的问题可能很愚蠢。我想创建一个 ajax 工具提示，我可以在其中通过一个选项设置 ajax 调用的 url，但此选项在包含 ajax 调用的 _mouseOver 方法中不可读。

    (function($) {
        $.widget("ui.tooltip", {
   options: {
        url: ''
    },
  _create: function() {
      alert(this.options.url); //it works
      this.element.bind({
        mouseenter: this._mouseOver
      });
    },
  _mouseOver: function() { 
      alert(this.options.url); //it dosen't works
    },
  ...

正如我设置的那样： $(".text").tooltip({url: "something" });

有人可以帮我吗，拜托。

Answer 1

(function ($) {
    $.widget("ui.tooltip", {
        self: null,
        options: {
            url: ''
        },
        _create: function () {
            self = this;
            self.element.bind({
                mouseenter: self._mouseOver
            });
        },
        _mouseOver: function () {
            alert(self.options.url); // it should work
        }
    });
})(jQuery);

在 _mouseOver 中使用“this”指的是事件函数内的当前对象，而不是小部件本身。您应该创建一个变量并将小部件 (this) 放在上面，以便能够在任何事件或方法中使用它的选项。在 jQuery 中使用 $.each() 函数时，您会发现相同的行为。

Answer 2

在这种情况下，_mouseOver 函数的“this”上下文是元素而不是 jquery 小部件。这就是你没有得到 options.url 的原因。

您可以尝试使用此代码作为开始：

_create: function() {
      alert(this.options.url); //it works
      this.element.tooltip = this;
      this.element.bind({
        mouseenter: this._mouseOver
      });
    },  
_mouseOver: function() { 
  alert(this.tooltip.options.url); //it dosen't works
},

它没有经过测试。