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