带有参数的Javascript字符计数器功能

Question

我在JavaScript初学者，我实现了我的EditorFor字符计数器发现某个地方，这里是它的外观在代码现在：

<span class="text-length-counter" id="email_counter"></span>     
@Html.EditorFor(model => model.ProfileFormDto.Email, new { htmlAttributes = new { @class = "form-control create-view-field", id="email_area" }}) 

这里是一个JavaScript函数，它的工作：

$(document).ready(function() { 
     var text_max = 50; 
     var text_length = $('#email_area').val().length; 

     $('#email_counter').html(text_length +'/' + text_max + ' znaków'); 

     $('#email_area').keyup(function() { 
      var text_length = $('#email_area').val().length; 

      $('#email_counter').html(text_length + '/' + text_max + ' znaków'); 
     }); 
    }); 

它工作正常，但我必须修改这个功能（），因为我在一个页面中使用很多柜台，所以上述功能必须采取三个参数，如：计数（计数器，面积，最大）。我无法管理这一点。还有就是我的新函数声明节：

 $(document).ready(function() { 
     Count('email_counter','email_area',50); 
    }); 

    function Count(counter,area,max) { 

     var text_length = $('#area').val().length; 

     $('#counter').html(text_length +'/' + max + ' znaków'); 

     $('#area').keyup(function() { 
      var text_length = $('#area').val().length; 

      $('#counter').html(text_length + '/' + max + ' znaków'); 
     }); 
    }; 

它不工作，我得到错误： 管理：169遗漏的类型错误：无法读取未定义

Answer 1

目前你的jQuery选择正试图选择使用id =“区域”和id =“计数器”

如果你打算把这一地区与反成多个参数，你需要的元素选择$（'＃'+ area）和$（'＃'+ counter）。

安装此更新，你的代码看起来像

function Count(counter, area, max) { 
    var text_length = $('#'+area).val().length; 

    $('#'+counter).html(text_length +'/' + max + ' znaków'); 

    $('#'+area).keyup(function() { 
    var text_length = $('#'+area).val().length; 
    $('#'+counter).html(text_length + '/' + max + ' znaków'); 
    }); 
}; 

Here's a working jsfiddle有多个输入字段。

Answer 2

你选择文本的特性“长度”是不正确的。

Count('email_counter','email_area',50); 

function Count(counter, area, max) { 
    var text_length = $('#' + area).val().length; 
    ... 
    $('#' + counter).html(text_length +'/' + max + ' znaków'); 
}