javascript - 计算具有不同 id 和名称属性的动态创建的文本区域的字符数

Question

我有两个文本区域，一个在另一个下

<div class="form-group">
<span id="textarea_feedback1"></span>
<span> 🖊Characters left</span>
<br>
<textarea name="answer1" id="answer1" rows="4" placeholder="Type your answer here" areaid="1"></textarea>
<hr>
<span id="textarea_feedback2"></span>
<span> 🖊Characters left</span>
<br>
<textarea name="answer2" id="answer2" rows="4" placeholder="Type your answer here" areaid="2"></textarea>
</div>

两个文本区域都是动态创建的，并且它们具有不同的 id 和名称属性。在某些时候，它们可能是 2、3、4……等等。 我想做的是为每个动态应用的文本区域创建一个字符计数器。

如果文本区域的数量是固定的(即始终为 2)，那就很容易了。

但是我很难找到一种方法将同一个 JQuery 脚本应用到具有不同名称和 id 属性的文本区域。

我正在考虑向每个文本区域添加一个像 areaid="" 这样的独特属性，这样我就可以以某种方式动态修改脚本。

这是我的脚本

$(document).ready(function() {
var text_max = 400;

$('#textarea_feedback1').html('<span>'+text_max + '</span>');

$('#answer1').on('input click keyup', function() {
    var text_length = $('#answer1').val().length;
    var text_remaining = text_max - text_length;

    $('#textarea_feedback1').html('<span>'+text_remaining + '</span>');
});

});

基本上，我认为应该发生的是，基于 areaid attr 来更改 span id="textarea_feedback" 和 textatea id="answer" 来匹配 areaid 值，因此脚本可以以某种方式单独工作到我拥有的尽可能多的文本区域。

这里是jsfiddle

Answer 1

将 span 和 textarea 包装在 div 等元素中，以便您可以轻松访问这两个元素。

;window.onload = function(){
  var text_max = 400;

  for(var tL=document.querySelectorAll('.dummy textarea'), i=0, j=tL.length; i<j; i++){
    $(tL[i]).on('input click keyup', function(){
        var text_length = this.value.length;
        var text_remaining = text_max - text_length;

        this.parentNode.querySelector('span').textContent = text_remaining
    })
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">

<div class = 'dummy'>
<span id="textarea_feedback1"></span>
<span> 🖊Characters left</span>
<br>
<textarea name="answer1" id="answer1" rows="4" placeholder="Type your answer here" areaid="1"></textarea>
</div>

<hr>

<div class = 'dummy'>
<span id="textarea_feedback2"></span>
<span> 🖊Characters left</span>
<br>
<textarea name="answer2" id="answer2" rows="4" placeholder="Type your answer here" areaid="2"></textarea>
</div>
</div>