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属性中，可以在事件触发时读取。像这样：

＆＃13;

$('.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');
  }
});

＆＃13;

<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>

＆＃13;

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);
});

您还可以更进一步，使用一个函数来创建具有限制的事件处理函数＆＃34;烘焙在＆＃34;：

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));

如何将两个jQuery事件处理程序合并为一个？

4 个答案: