如何計算在多個文本區域剩餘的字符

Question

你好，我想要使用jquery計算多個文本區域框中剩餘的字符，它的工作原理，但我想單獨計算每個框，我知道重複結果的問題，因爲我使用同一類的分區， 對不起，我是新的 有沒有什麼好的方法來解決這個問題，而不使用不同的類和重複腳本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>