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');
      });
  });

它工作正常，但我必须修改这个函数()，因为我必须在一页上使用很多计数器，所以上面的函数必须接受三个参数，比如：Count(counter,area,max) .我无法管理这个。在部分中有我的新函数声明：

        $(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');
        });
    };

它不工作，我收到错误： Manage:169 未捕获的类型错误：无法读取未定义的属性 'length'

Answer 1

您的选择器文本不正确。

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

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

Answer 2

您的 jQuery select 或当前正在尝试 select id="area" 和 id="counter"

的元素

如果你要把面积和计数器变成参数，你需要select用$('#' + 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 有多个输入字段。

Javascript 带参数的字符计数器函数

Javascript character counter function with parameters

javascript

asp.net-mvc

counter