Question

你好我想用jquery计算剩余在多个文本区域框中的字符，它可以工作，但我想单独计算每个框，我知道重复结果的问题，因为我使用相同的div类，抱歉，我是新人有没有什么好办法解决这个问题，而不使用不同的类和重复脚本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>

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

1 个答案: