Question

我有以下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");
    }
});

Answer 1

喜欢这个吗？

$("textarea.charcount").each(function() {
  YourFunction($(this))
});

$("textarea.charcount").on("input", function() {
  YourFunction($(this))
});

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

Answer 2

删除第一部分，然后在准备就绪时触发输入事件，如下所示

$(function() {
  $("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");
    }
  });

  $("textarea.charcount").trigger("input");
});

Answer 3

像这样添加，

$(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/

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

3 个答案: