如何將兩個jQuery事件處理程序合而為一？

Question

我的問題是我有兩個事件處理程序，它們執行相同的操作但針對不同的對象。 有人可以告訴我該怎么做。

$('.url1').keyup(function() {
  var limit = 60; // Maximale Anzahl an Zeichen
  var count = $(this).val().length;

  $('.counter').html(count);
  if (count > limit) {
    $(this).css('border-color', 'crimson');
  } else {
    $(this).css('border-color', 'ForestGreen');
  }

});

$('.title1').keyup(function() {
  var limit = 45; // Maximale Anzahl an Zeichen
  var count = $(this).val().length;

  $('.counter').html(count);
  if (count > limit) {
    $(this).css('border-color', 'crimson');
  } else {
    $(this).css('border-color', 'ForestGreen');
  }
});

Answer 1

元素之間的唯一區別是您設置的limit 。 因此，您可以將相同的功能應用於兩個元素，並將limit放在元素本身的data屬性中，事件觸發時可以讀取該屬性。 像這樣：

 $('.url1, .title1').keyup(function() { var limit = $(this).data('limit'); var count = $(this).val().length; $('.counter').html(count); if (count > limit) { $(this).css('border-color', 'crimson'); } else { $(this).css('border-color', 'ForestGreen'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Url: <input class="url1" type="text" data-limit="60" /><br /> Title: <input class="title1" type="text" data-limit="45" /><br /> <div class="counter"></div> 

Answer 2

limit是通過元素類計算

$('.url1, .title1').keyup(function() {
  var limit $(this).hasClass('url1') ? 60 : 45;
  var count = $(this).val().length;

  $('.counter').html(count);
  if (count > limit) {
    $(this).css('border-color', 'crimson');
  } else {
    $(this).css('border-color', 'ForestGreen');
  }

});    

Answer 3

使用基於列表的選擇器和一些邏輯，以根據是否存在'url1'類來設置限制變量。

$('.url1,.title1').keyup(function() {

  var limit = $(this).hasClass("url1") ? 60 : 45; // Maximale Anzahl an Zeichen

  var count = $(this).val().length;

  $('.counter').html(count);
  if (count > limit) {
    $(this).css('border-color', 'crimson');
  } else {
    $(this).css('border-color', 'ForestGreen');
  }

});

Answer 4

您可以簡單地分解出一個基於limit參數化的單獨函數，然后從事件處理程序中調用該函數：

function checkLimit($el, limit) {
  var count = $el.val().length;

  $('.counter').html(count);
  if (count > limit) {
    $el.css('border-color', 'crimson');
  } else {
    $el.css('border-color', 'ForestGreen');
  }
}

$('.url1').keyup(function() {
    checkLimit($(this), 60);
});

$('.title1').keyup(function() {
    checkLimit($(this), 45);
});

您還可以更進一步，並使用一個函數來創建事件處理程序函數，並限制其“嵌入”：

function checkLimitHandler(limit) {
    return function () {
        var count = $(this).val().length;

        $('.counter').html(count);
        if (count > limit) {
            $(this).css('border-color', 'crimson');
        } else {
            $(this).css('border-color', 'ForestGreen');
        }
    };
}

$('.url1').keyup(checkLimitHandler(60));

$('.title1').keyup(checkLimitHandler(45));