javascript - 在表中重复回显时字符计数器不起作用

Question

我正在尝试在表中的多个文本区域中使用下面的 javascript 字符计数器。问题是计数器仅在我的表格的第一行中起作用。带有文本区域的后续行回显“剩余 250 个字符”，但无法按预期运行。我不知道如何为每个字符计数器分配一个唯一的 id，以便它在所有文本区域中发挥作用。任何帮助将不胜感激。

PHP:

echo "</td><td>";
echo '<form action="peerflagreview.php?foorbar=' . $foobar . '" method="post" id="FlagPeerReview">
<A NAME="#peer' . $foobar . '"> (<a href="#peer' . $foobar . '" class="show_hide2">Report</a>)
<textarea class="PeerFlag" value="" name="PeerFlag" id="PeerFlag2"></textarea>
<input type="hidden" value="Post" name="submit" />
<span id="PeerFlag2Span">250 characters remaining</span>
<input type="submit" value="Submit"></form>';
echo "</td></tr>"; 

JavaScript:

<script type="text/javascript">
$("#PeerFlag2").on('change keydown paste input', function(){
      updateCounter('#PeerFlag2');
});
function updateCounter(theTextAreaID) {
    var remaining = 250 - jQuery(theTextAreaID).val().length;
    jQuery(theTextAreaID + 'Span').text(remaining + ' characters remaining.');
}

$('textarea').on('keydown', function(event) {
    if (event.keyCode == 13)
        if (!event.shiftKey) $('#PeerFlag').submit();
});

</script>

Answer 1

这是一个非常简单的演示，因此我没有看到需要太多解释，除了这将针对正在使用的文本区域的下一个跨度。我看到您已经有了 jQuery，所以这个演示也将使用 jQuery。

$(document).ready(function(){
    $(".UserInput").on('input', function(){
        $(this).next("span").html(250 - this.value.length + " characters remaining");
    }).trigger('input');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="UserInput"></textarea><span>this is filled automatically</span><br/>
<textarea class="UserInput"></textarea><span></span><br/>
<textarea class="UserInput"></textarea><span></span><br/>
<textarea class="UserInput"></textarea><span></span><br/>

如果您有任何疑问，请在下面留言，我会尽快回复您。

我希望这有帮助。快乐编码!