自定义对象上的 jQuery val() 方法答案

【问题标题】：jQuery val() Method on a Custom Object自定义对象上的 jQuery val() 方法
【发布时间】：2009-07-28 14:49:09
【问题描述】：

我有一个名为 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 实例上有一个 change 事件，每当 $inputBox 发生更改时就会触发该事件，但更改回调函数无法在我的类中使用 val() 方法。我假设通过使用 $(this).val() 我正在调用 jQuery val() 方法，这当然是行不通的。是否可以访问我定义的 val() 方法？

【问题讨论】：

“无法使用”是什么意思（澄清）。它无法访问它？您是否尝试从 firebug 调用 val 方法？它对我来说当然是公开的。
我的理解是，在更改处理程序中，关键字“this”指的是元素本身，而不是我创建的对象。如果我像 $(this) 一样包装它，它只是使用普通的 jQuery 对象而不是我的。
哦！好的，我想我知道解决办法。

标签： javascript jquery inheritance oop user-defined

【解决方案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 方法的正确方法

【讨论】：

【解决方案2】：

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

【讨论】：

是的，我不太喜欢它，但我想这是唯一的方法。感谢您的帮助。
是的，jQuery 应用了自己的作用域的函数，你需要一些方法来改变它，而不破坏 jQuery 的内部代码。因此，您需要传递对象。

【解决方案3】：

如果您真的对为您的插件扩展 val() 感兴趣，可以尝试以下方法：

让我们假设您在插件的最外层元素中设置和属性“值”。

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

如果我的插件实例的 id 是 myValueBox，那么我可以通过以下方式使用 val：

$("#myValueBox").val()

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

【讨论】：

【解决方案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 函数中的所有方法都是私有的；

【讨论】：

this.val = function... 肯定不是私人的。
如果是function val() {...}，那么它就是一个私有函数。