Question

当您在每个文本区域中键入文本以重新调整范围中剩余的字符时，我喜欢将文本区域数据与范围数据匹配

如何匹配它们？

html

 <span data-lang="gb"></span>
<textarea data-lang="gb"></textarea>

<span data-lang="en"></span>
<textarea data-lang="en"></textarea>

jquery

 $('textarea').each(function(){
  var lang = $(this).data('lang');
  $(this).keyup(function(){
    if (this.value.length > 50) {
      return false;
    }
    $('span').html("(characters left: " +(50 - $(this).val().length) + " )");
  });
});

Answer 1

您可以在文本区域中创建一个数据属性，告诉它什么是计数器元素，并使用它来选择和更新计数器。

赞：

$("[data-counter]").on('input', function (e) {
  var counter = $(this).data('counter');
  var $counter = $(counter);
  var maxlength = parseInt($(this).attr('maxlength'));
  var count = $(this).val().length;
  $counter.text('Characters left: ' + (maxlength - count));
}).trigger('input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="mytext" data-counter="#mytextcounter" maxlength="50"></textarea>
<span id="mytextcounter"></span>

Answer 2

您已经非常接近重点了

$('textarea').each(function(){
  var lang = $(this).data('lang');
  $(this).keyup(function(){
    if (this.value.length > 50) {
      return false;
    }
    $('span[data-lang="'+lang+'"]').html("(characters left: " +(50 - $(this).val().length) + " )");
  });
});

例如，您可以看到here，可以按数据属性选择一个元素。请注意，此代码未经测试

jQuery-匹配具有相同数据的元素

2 个答案: