Question

所以我尝试使用以下代码修改原始jQuery的val（）方法

(function ($) {
    var original_val = jQuery.fn.val;
    jQuery.fn.val = function( value ) {
        var elem = this[0], val = undefined;

        // Set for value first, if its undefined
        val = value ? value : "";

        if (elem){
            if (elem.hasAttribute('thisattribute')){
                if (val){
                    if (typeof val === 'number'){
                        // Do something here if val is a typeof number
                    }
                } else {
                    // Do something here if val doesn't exist
                }
            }
        }

        console.log("Let me see what is value ::: ", val);
        console.log("Let me see what is elem ::: ", elem);

        return original_val.apply(this, [val]);
    }
})(jQuery);

使用上面的代码，我检查输入元素是否具有特定属性，然后继续修改值，然后将其传递给原始jQuery的val（）方法。

使用此方法，当我使用以下代码时，我设法修改了值

$(id).val(10000)

但是当我尝试使用底部代码检索值时，它失败了

$(id).val()

更多，修改后，我无法再将val（）方法与trim（）等其他方法链接在一起，因为它会引发以下错误

Uncaught TypeError: input.val(...).trim is not a function

我在这里做什么错了？

Answer 1

这是因为您的代码在调用原始val时始终会提供一个参数，即使用作吸气剂也是如此。因此，原始的val总是认为正在调用它来设置该值。

我希望使getter例早退出该函数，就在顶部附近：

if (!arguments.length) {
    return original_val.call(this);
}

（与jQuery所做的检查相同。）

一些注意事项：

此：

return original_val.apply(this, [val]);

可以这样更有效地编写：

return original_val.call(this, val);

无需创建该数组。

在几个地方，您正在测试虚假，但是代码似乎是用来检查undefined的

实时示例，请参见***注释：

(function($) {
    var original_val = jQuery.fn.val;
    jQuery.fn.val = function(value) {
        // *** Early exit when used as a getter
        if (!arguments.length) {
            return original_val.call(this);
        }
        var elem = this[0],
            val = undefined;

        // Set for value first, if its undefined
        // *** Note: This converts any falsy value to "", not just undefined.
        // *** Later you have a check for `val` being a number. `0` is falsy.
        val = value ? value : "";

        if (elem) {
            if (elem.hasAttribute('thisattribute')) {
                if (val) { // *** Again, 0 is falsy
                    if (typeof val === 'number') {
                        // Do something here if val is a typeof number
                    }
                } else {
                    // Do something here if val doesn't exist
                }

                // Just for the purposes of demonstration:
                val = val.toUpperCase ? val.toUpperCase() : val;
            }
        }

        console.log("Let me see what is value ::: ", val);
        console.log("Let me see what is elem ::: ", elem);

        return original_val.call(this, val);
    }
})(jQuery);


// *** Setting a value
$("#txt").val("foo");
// *** Reading a value
console.log($("#txt").val());

<input type="text" id="txt" value="" thisattribute="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

修改Jquery的val（）方法但无法正常工作

1 个答案: