如何将 keyup() 函数正确应用于具有不同输入的不同 DOM 元素？

Question

我正在尝试限制出生日期的日、月和年输入的不同最小和最大输入。但是，函数中的 "this" 似乎有问题。我可以知道编写此函数的正确和好的方法是什么吗？我尝试了箭头功能，但它不起作用。我应该使用绑定吗？非常感谢！

$(document).ready(function () {
 var minMonth = 1;
 var maxMonth = 12;
 var minDay=1;
 var maxDay=31;
 var minYear=1900;
 var maxYear=2019;

 function minMaxDob(minDob, maxDob){
        if($(this).val() > maxDob){
            $(this).val(maxDob);
          }
        if($(this).val() < minDob){
            $(this).val(minDob);
          }
      }

 $("#dob_month").keyup(function(){
    minMaxDob(minMonth,maxMonth);
 });
 $("#dob_day").keyup(function(){
    minMaxDob(minDay,maxDay);
 });
 $("#dob_year").keyup(function(){
    minMaxDob(minYear,maxYear);
 });
});

Answer 1

你必须像下面这样将 jQuery 对象传递给 minMaxDob，你必须这样做，因为 "this" 指的是当前正在执行的函数，因为你正在调用辅助函数 "this" 不再引用 DOM 对象，而是引用函数 minMaxDob:

$(document).ready(function () {
  var minMonth = 1;
  var maxMonth = 12;
  var minDay=1;
  var maxDay=31;
  var minYear=1900;
  var maxYear=2019;

  function minMaxDob(jqObj, minDob, maxDob){
    if(jqObj.val() > maxDob){
        jqObj.val(maxDob);
      }
    if(jqObj.val() < minDob){
        jqObj.val(minDob);
      }
  }

  $("#dob_month").keyup(function(){
    minMaxDob($(this),minMonth,maxMonth);
  });
  $("#dob_day").keyup(function(){
    minMaxDob($(this),minDay,maxDay);
  });
  $("#dob_year").keyup(function(){
    minMaxDob($(this),minYear,maxYear);
  });
});

Answer 2

你忘记传递对象了。每次在函数内部调用函数时，函数将只读取传递的数据，而不是顶部的变量或对象。示例：

function run(){
x=2;
y=3;
check(x);
//or
check2(x,y);
}
function check(x){
if(x<y){
console.log('in that example you will have a error becouse you are not passing 2nd val')
}
}
function check2(x,y){
if(x<y){
console.log('Yes, x is smaller than Y, we send all necessary data')
}
}

简单的广告 'this' 并重建您的主要功能。

你下面的脚本和片段

$(document).ready(function () {
 var minMonth = 1;
 var maxMonth = 12;
 var minDay=1;
 var maxDay=31;
 var minYear=1900;
 var maxYear=2019;

 function minMaxDob(minDob, maxDob,el){
       if(el.val()> maxDob){
            el.val(maxDob);
          }
        if(el.val() < minDob){
            el.val(minDob);
          }
         
      }


 $("#dob_month").keyup(function(){
    minMaxDob(minMonth,maxMonth,$(this));
 });
 $("#dob_day").keyup(function(){
    minMaxDob(minDay,maxDay,$(this));
 });
 $("#dob_year").keyup(function(){
    minMaxDob(minYear,maxYear,$(this));
 });
});

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

如何将 keyup() 函数正确应用于具有不同输入的不同 DOM 元素？

How to apply keyup() function to different DOM element with different input correctly?

javascript

jquery

bind

this

apply