JQuery - 如何修改特定元素的 jquery 方法

Question

我想要做的是更改特定元素的默认 jquery 方法。

例如，我想更改某些(不是全部)select 列表的方法val()。之后，如有必要，请恢复。

我的第一次尝试如下，但不起作用。

$('#list').val = function(){ alert('toto'); };
//and then
$('#list').val()  //not work

解决方案

var old_val = $.fn.val;
$.fn.val = function(value){
    //some condition to trigger
    if (this.hasClass('someclass')){
        //getter
        if (value===undefined){
            //do something to get the values
            return val;
        }
        //setter
        else {
            //do something with the value
            return this;
        }
    }

    return old_val.apply(this, arguments);
};

Answer 1

每次调用 $('#list') 时，您都会创建一个新的 jQuery 对象。因此，当您执行 $('#list').val = function(){alert('toto'); 时};，您仅覆盖了该实例的 val() 方法。如果您缓存该对象，您可以继续使用覆盖的 val() 方法:

var list = $('#list');
list.val = function(){ alert('toto'); };
list.val(); //alerts 'toto'

但是，这是一个不好的做法，因为您不知道还有什么取决于 val() 是否正常工作。更好的方法是创建自己的插件:

$.fn.totoVal = function() {
    alert('toto');
    return this;
};

然后您可以将其称为 $('#list').totoVal()

编辑

如果您真的非常想这样做(这又是一个坏主意)，您可以通过这种方式覆盖 native val() 实现:

var originalValueFunct = $.fn.val;

//update value function
$.fn.val = function () {
    return "custom value";
}

//do something with val()

//restore value function
$.fn.val = originalValueFunct;

查看此working demo有关覆盖和恢复 native val() 函数的示例。

我强烈建议不要这样做，因为您会在代码或您使用的任何依赖 val() 方法的库中产生副作用。这些副作用将很难调试，因为它们只出现在您的环境中，并且您更改了核心 jQuery 功能并不总是显而易见的。