Question

我有一个名为ValueBox的对象我是这样创建的：

function ValueBox(params) {
   ...
   $.extend(true, this, $('/* some HTML elements */'));
   ...
   var $inputBox = $('input[type=text]', this);
   ...
   this.val = function(newValue) {
      if(typeof newValue == "number") {
         $inputBox.val(newValue);
         $inputBox.change();
      } else {
         return parseFloat($inputBox.val());
      }
   }
}

我在特定的ValueBox实例上有一个更改事件，只要$inputBox发生更改就会触发，但更改回调函数无法在我的类中使用val（）方法。我假设使用$(this).val()我正在调用jQuery val（）方法，这当然不起作用。是否可以访问我定义的val（）方法？

Answer 1

$.fn.yourpluginscope.originalVal = $.fn.val;
$.fn.extend({
    val: function (value) {
        if (/* detect your plugin element */)
        {
            if (value == undefined)
                return /* getter */;
            return $.fn.yourpluginscope.originalVal.call(/* setter */, value);
        }
        return $.fn.yourpluginscope.originalVal.call(this, value);
    }
});

扩展“原生”jQuery方法的正确方法

Answer 2

当您致电$inputBox.change()时，请将ValueBox对象传递给它。然后打电话给val。这样，您就不必担心jQuery控件中的范围问题了。

Answer 3

如果您真的对扩展插件的val（）感兴趣，可以尝试以下内容：

我们假设您已在插件的最外层元素中设置并定义“value”。

jQuery.fn.extend({ val: function(newValue) {
    if (newValue == null) {
        return $(this).attr("value");
    } else {
        $(this).attr("value", newValue);        
    }
} 
});

如果我的插件实例的id是myValueBox，那么我将能够以下列方式使用val：

$（ “＃myValueBox”）。VAL（）

它对我有用，但我不确定它是否符合您的要求。

Answer 4

我认为你应该尝试类似的东西

function ValueBox(params) {
   ...
   $.extend(true, this, $('/* some HTML elements */'));
   ...
   this.inputBox = $('input[type=text]', this);
   ...
}

ValueBox.prototype.val = function(newValue) {
    if(typeof newValue == "number") {
        this.inputBox.val(newValue);
        this.inputBox.change();
    } else {
        return parseFloat(this.inputBox.val());
    }
};

// then this should work
var test = new ValueBox();
test.val(123);

在原型中定义公共方法，ValueBox函数中的所有方法都是私有的;

自定义对象上的jQuery val（）方法

4 个答案: