如何覆盖 jQuery 插件的 .val()？

Posted 2023-05-09

【中文标题】如何覆盖 jQuery 插件的 .val()？

【英文标题】：How to override on .val() of a jQuery plugin?

【发布时间】：2021-01-06 13:01:00

【问题描述】：

如何覆盖 val() 方法，而不是全部覆盖，而是覆盖那些由我的插件返回的方法，例如查看以下示例：

(function ($) 
    $.fn.switch = function (action, options) 
        var settings = $.extend(
        , options);

        return this.each(function () 
            $this.val = function()
              return 10;
          
        );
    ;

)(jQuery);

我希望$("#some-id").switch().val() 返回10，而它似乎不起作用。 我不想使用$.fn.val 覆盖整个对象。 我应该如何做到这一点？

【问题讨论】：

这似乎是一件非常违反直觉的事情，因为任何使用 jQuery 的人都非常熟悉默认的 val() 行为，仅针对特定元素更改它可能会导致混淆

【参考方案1】：

一种选择是将插件元素的 data 设置为表明它是插件元素的值，然后更改 $.fn.val 以调用您的自定义逻辑（如果调用它的元素是插件元素）：

(function($) 
  $.fn.switch = function(action, options) 
    var settings = $.extend(, options);

    this.each(function() 
      $(this).data('plugin-element', true);
    );
  ;
  const origVal = $.fn.val;
  $.fn.val = function(newVal) 
    if (newVal) 
      return origVal.call(this, newVal);
    
    return $(this).data('plugin-element')
      ? 10
      : origVal.call(this);
  

)(jQuery);

$('div').switch();
console.log($('div').val());
console.log($('input').val());
$('input').val(33);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<input value=55>

虽然这是可能的，但这是一件非常奇怪的事情，并且使代码库更加脆弱。考虑是否有更优雅的方式来实现您的目标。