javascript - 如何将两个 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>