Question

有没有办法轻松覆盖jQuery的val()函数？

我想要覆盖它的原因是我想在每次为元素设置值时添加一些处理。而且我不想制作另一个自定义值设置器，例如myVal()。

Answer 1

您可以存储对原始val函数的引用，然后覆盖它并进行处理，稍后使用call调用它，以使用正确的上下文：

(function ($) {
  var originalVal = $.fn.val;
  $.fn.val = function(value) {
    if (typeof value != 'undefined') {
      // setter invoked, do processing
    }
    return originalVal.call(this, value);
  };
})(jQuery);

请注意，只需检查$(selector).val();参数是否为$(selector).val('new value');，就可以区分getter call value和setter call undefined。

Answer 2

我知道这是一个古老的主题，但它是谷歌搜索中的第一个，答案并不完全正确......

例如，如果你在控制台$('#myinput').val()中尝试，你应该得到#myinput的值。

但如果你做$('#myinput').val(undefined)，你应该设置#myinput的值！（使用当前答案及其注释，您将不会设置#myinput的值

以下是使用arguments的升级答案。

(function ($) {
  var originalVal = $.fn.val;
  $.fn.val = function(value) {
    if (arguments.length >= 1) {
      // setter invoked, do processing
      return originalVal.call(this, value); 
    }
    //getter invoked do processing
    return originalVal.call(this);
  };
})(jQuery);

如果你想传递所有参数，你也可以使用apply

(function ($) {
  var originalVal = $.fn.val;
  $.fn.val = function(value) {
    if (arguments.length >= 1) {
      // setter invoked, do processing
    } else {
      //getter invoked do processing
    }
    return originalVal.apply(this, arguments);
  };
})(jQuery);

我希望它有所帮助！

Answer 3

我知道这个问题很老但只是为了给出一个完整的解决方案。为了使jQuery.val（）和jQuery.val（value）在覆盖后都能正常工作，你需要正确地单独覆盖它。因为在调用jQuery.val（）然后调用originalVal.call（this，value）;将无法正常工作。

要以正确的方式执行此操作，您需要在获取值时执行类似的操作： originalVal.call（本）;

这是一个解释所有内容的网站：http://extremedev.blogspot.com/2012/01/override-jqueryval-and-jqueryvalvalue.html

此致罗马

Answer 4

如果我理解你是正确的，那么这样的事情就可以了。

jQuery.fn.val = function (new_val) {
    alert("You set a val! How wonderful!");
    this.value = new_val;
};

只需确保包含常规功能：获取选择的值等等。只需在常规jQuery库之后将代码放在之后。

Answer 5

使用此代码，您可以覆盖特定元素的.val()的“ get”和“ set”：

(function () {

    var __val = $.fn.val;
    $.fn.val = function (value) {
        if (this[0] && (this[0].$val_get || this[0].$val_set)) {
            if (arguments.length === 0) return this[0].$val_get();
            else return this[0].$val_set(value) || this;
        }
        return __val.apply(this, arguments);
    };

})();

现在，您必须在DOM元素上创建两个函数属性-$val_get和$val_set：

<input type="text" id="myInput" />
<input type="text" id="someOtherInput" />

<script>

    $('#myInput')[0].$val_get = function () {
        console.log('Got value from myInput!');
        return this.value;
    };

    $('#myInput')[0].$val_set = function (value) {
        console.log('Set value of myInput!');
         this.value = value;
    }

    //----

    $('#myInput').val('Hello!'); //Console: "Got value from myInput!"
    $('#myInput').val(); //Hello! | Console: "Set value to myInput!"

    $('#someOtherInput').val('Hello!'); //Console: ""
    $('#someOtherInput').val(); //Hello! | Console: ""

</script>

这对于创建协调多个控件的组件很有用。

JsFiddle：https://jsfiddle.net/oj4gt2ye/6/

Answer 6

我有一些要添加到CMS的答案，我的实现会有所不同，如下所示：

(function ($) { var fnVal = $.fn.val;
    $.fn.val = function(value) {
        if (typeof value == 'undefined') {
            return fnVal.call(this);
        }
        var result = fnVal.call(this, value);
        $.fn.change.call(this);
        // here you can add some more implementation
        return result;
    };
})(jQuery);

观察 $ .fn.change.call（this）; 将在退出val（＆＃39;＆＃39;）函数之前调用，这也将触发.change（）在每个val（＆＃39;＆＃39;）分配。

覆盖jQuery .val（）函数？

6 个答案: