主页 / coding / 问题 / 79466685
Accepted
Gavin
Asked: 2025-02-25 21:14:25 +0800 CST

覆盖 jQuery .val() 函数有效，但 getter 被调用多次

  • 772

我正在重写 jQuery 的.val()函数，以便当我设置元素的值时select我可以自动触发更改事件。

getter 和 setter 代码运行正常，但是当$('select').val()控制台输出Getter两次时。我认为这不应该发生，所以有人知道哪里出了问题吗？

这是一个 jsfiddle：https://jsfiddle.net/41hxsam9/1/

const originalVal = $.fn.val;

$.fn.extend( {
    val: function() {
        if ( arguments.length > 0 ) {
            if ( this.hasClass( 'myselect' ) ) {
                console.log( 'Setter' );
                const result = originalVal.apply( this, arguments );
                this.trigger( 'change' );
                return result;
            }
        }
        console.log( 'Getter' );
        return originalVal.apply( this, arguments );
    }
} );
jquery

1 个回答

  1. Best Answer

    如果我们记录 val 返回的对象，我们会看到它为 select 调用一次，为 option 调用一次 - 这可能就是 jQuery 的工作方式：

    else {
  // Getter call.
  console.log('Getter',this["0"]);
  return originalVal.apply(this, arguments);
}


    $(() => {

const originalVal = $.fn.val;
$.fn.extend({
  val: function() {
    if (arguments.length > 0) {
      // This is a setter call.
      if ($(this).hasClass('myselect')) {
        console.log('Setter');
        const result = originalVal.apply(this, arguments);
        $(this).trigger('change');
        return result;
      } else {
        // Normal setter for elements without the class.
        return originalVal.apply(this, arguments);
      }
    } else {
      // Getter call.
      console.log('Getter',this["0"]);
      return originalVal.apply(this, arguments);
    }
  }
});

$('#button-1').click((e) => {
  $('select').val('1');
});

$('#button-2').click((e) => {
  console.log($('select').val());
});
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<p>
  <button id="button-1">Set Value</button> <button id="button-2">Get Value</button>
</p>
<p>
  <select class="myselect">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</p>

    • 1

相关问题