CODEWITHSUNDEEP
javascriptjquery
Leon
Leon

Reputation: 27

How do I combine two jQuery event handlers in to one?

My problem is that I have two event handlers who do the same thing but for different objects. Could someone tell me how to do this.

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

Upvotes: 2

Views: 77

Answers (3)

JLRishe
JLRishe

Reputation: 101758

You can simply factor out a separate function that's parameterized based on limit, and call that from your event handlers:

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

You could also go one step further and use a function that creates your event handler functions with the limits "baked in":

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

Upvotes: 0

Vanquished Wombat
Vanquished Wombat

Reputation: 9535

Use a list-based selector and a bit of logic to set your limit variable based on whether the 'url1' class is present.

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

});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

The only difference between your elements is the limit you set. So you can apply the same function to both elements and place the limit in a data attribute on the element itself which can be read when the event fires. Something like this:

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

Upvotes: 3

Related Questions