如何將兩個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));