如何计算多个文本区域中剩余的字符

Question

你好，我想使用 jquery 计算多个文本区域框中剩余的字符，它有效，但我想单独计算每个框，而且我知道重复结果的问题，因为我使用相同的class 的 div，抱歉我是新来的有什么好的方法可以在不使用不同的 classes 和重复脚本 4 次的情况下解决这个问题吗？因为那不合逻辑？

$(function() {
$('textarea').keyup(function() {
 var maxLength = $(this).attr('maxlength'),
     textLength =  $(this).val().length,
     remText    = ( maxLength - textLength );
     $('.text').html(remText + ' characters remaining')

});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea  maxlength="20"></textarea> 
<div class='text'></div>

<textarea  maxlength="20"></textarea> 
<div class='text'></div>

<textarea  maxlength="20"></textarea> 
<div class='text'></div>

<textarea  maxlength="20"></textarea> 
<div class='text'></div>

Answer 1

使用像next().

这样的遍历方法隔离实例

$(function() {
  $('textarea').keyup(function() {
    var maxLength = $(this).attr('maxlength'),
      textLength = $(this).val().length,
      remText = (maxLength - textLength);
    $(this).next('.text').html(remText + ' characters remaining');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea maxlength="20"></textarea>
<div class='text'></div>

<textarea maxlength="20"></textarea>
<div class='text'></div>

<textarea maxlength="20"></textarea>
<div class='text'></div>

<textarea maxlength="20"></textarea>
<div class='text'></div>

如何计算多个文本区域中剩余的字符

How to calculate characters remaining in multiple text area

jquery

textarea

input

character