jQuery - 将“each”与“on”事件结合

debugcn 发表于 Dev

罗克韦尔普

我有以下 jQuery 代码，它可以正常工作并且可以完成我需要的所有事情 - 似乎有点笨拙的方式来实现我需要的东西 - 即。两个部分的实际“功能”是相同的 - 第一部分给我进入页面时的当前值，第二部分动态更改输入到 textarea 时的值。我的问题是，有没有办法“巧妙地”将两半组合起来，让函数只出现一次 - 以后编辑会更容易：

$("textarea.charcount").each(function() {
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;
    if( currentLength >= maxlength ){
        $(this).next('div').addClass('limit');
        $(this).next('div').text("Character limit reached!");
    } else {
        $(this).next('div').removeClass("limit");
        $(this).next('div').text(maxlength - currentLength + " charachters left");
    }
});

$("textarea.charcount").on("input", function() {
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;
    if( currentLength >= maxlength ){
        $(this).next('div').addClass('limit');
        $(this).next('div').text("Character limit reached!");
    } else {
        $(this).next('div').removeClass("limit");
        $(this).next('div').text(maxlength - currentLength + " charachters left");
    }
});

Anfath Hifans

像这样添加，

$(function(){   
    $("textarea.charcount").each(function(){
        charcount(this);
    });
    $("textarea.charcount").on("input", function() {
        charcount(this);
    });
});
function charcount(element){
    var maxlength = $(element).attr("maxlength");
    var currentLength = $(element).val().length;
    if( currentLength >= maxlength ){
        $(element).next('div').addClass('limit').text("Character limit reached!");
    } else {
        $(element).next('div').removeClass("limit").text(maxlength - currentLength + " charachters left");
    }
}

演示：https : //jsfiddle.net/rhqtc67a/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。