Question

我是javascript的初学者，我在我的编辑器中实现了字符计数器，这里是它现在在代码中的样子：

<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）.I无法管理这个。部分中有我的新函数声明：

        $(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未捕获的TypeError：无法读取未定义的属性“长度”

Answer 1

您的jQuery选择器当前正在尝试选择id =“area”和id =“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');
}

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

2 个答案: